Wie lösche ich ein Objekt im Array mit Localstorage?

Question

Ich muss Objekt im Array löschen und es sollte aus dem lokalen Speicher gelöscht werden. Ich versuche, es zu löschen, indem ich Spleißmethode verwende, aber nicht wirklich, wie man es benutzt. Folloeing ist mein Code, den ich tried-

var details = []; 



function addEntry() { 


    var existingEntries = JSON.parse(localStorage.getItem("allEntries")); 
    if (existingEntries == null) existingEntries = []; 


    var srno = document.getElementById("txtpid").value; 
    var name = document.getElementById("txtpname").value; 
    var dob = document.getElementById("txtpdob").value; 
    var email = document.getElementById("txtpemail").value; 
    var address = document.getElementById("txtpaddr").value; 
    var contact = document.getElementById("txtpmobile").value; 

    var obbbj = { 
    txtpid: srno, 
    txtpname: name, 
    txtpdob: dob, 
    txtpemail: email, 
    txtpaddr: address, 
    txtpmobile: contact 
    }; 
    localStorage.setItem("details", JSON.stringify(obbbj)); 

    existingEntries.push(obbbj); 
    localStorage.setItem("allEntries", JSON.stringify(existingEntries)); 
    showEntry(); 
    console.log(existingEntries); 
    //location.reload(); 
} 


function showEntry() { 
    var messageBox = document.getElementById("display"); 
    messageBox.value = ""; 
    document.getElementById("txtpid").value = ""; 
    document.getElementById("txtpname").value = ""; 
    document.getElementById("txtpdob").value = ""; 
    document.getElementById("txtpemail").value = ""; 
    document.getElementById("txtpaddr").value = ""; 
    document.getElementById("txtpmobile").value = ""; 


    var render = "<table border='1'>"; 
    render += "<tr><th>Srno</th><th>Name</th><th>Birthdate</th><th>Email</th><th>Address</th><th>Contact</th></tr>"; 


    var allEntriesoo = {}; 
    var detailsOOO = {}; 
    for (i = 0; i < localStorage.length; i++) { 
    var key = localStorage.key(i); 
    var person = localStorage.getItem(key); 
    if (key == 'allEntries') 
     allEntriesoo = JSON.parse(person); 
    if (key == 'details') 
     detailsOOO = JSON.parse(person); 
    var data = JSON.parse(person); 

    } 

    for (var key in allEntriesoo) { 
    console.error(allEntriesoo[key]) 
    render += "<tr><td>" + allEntriesoo[key].txtpid + "</td><td>" + allEntriesoo[key].txtpname + " </td>"; 
    render += "<td>" + allEntriesoo[key].txtpdob + "</td>"; 
    render += "<td>" + allEntriesoo[key].txtpemail + "</td>"; 
    render += "<td>" + allEntriesoo[key].txtpaddr + "</td>"; 
    render += "<td>" + allEntriesoo[key].txtpmobile + "</td>"; 
    render += "<td><input type='button' value='Delete' onClick='return deleteEntry(" + i + ")'></td>"; 
    render += "<td><input type='button' value='Edit' onClick='return editInfo(" + i + ")'></td></tr>"; 

    } 
    render += "</table>"; 
    display.innerHTML = render; 
} 

function nameVal() { 
    document.getElementById("txtpname").focus(); 
    var n = document.getElementById("txtpname").value; 
    var r; 
    var letters = /^[a-zA-Z]+$/; 
    if (n == null || n == "") { 
    alert("please enter user name"); 
    return null; 
    n.focus(); 
    } else { 
    if (n.match(letters) && n != "") { 
     r = ValidateEmail(); 
     return r; 
    } else { 
     alert("please enter alphabates"); 
     document.getElementById("txtpname").value = ""; 
     document.getElementById("txtpname").focus(); 
     return null; 
    } 
    } 
} 

function ValidateEmail() { 
    var uemail = document.getElementById("txtpemail").value; 
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; 
    if (uemail.match(mailformat)) { 
    return true; 
    } else { 
    alert("You have entered an invalid email address!"); 
    document.getElementById("txtpemail").value = ""; 
    document.getElementById("txtpemail").focus(); 
    return null; 
    } 
} 

function alphanumeric() { 
    var uadd = document.getElementById("txtpaddr").value; 
    var letters = /^[0-9a-zA-Z]+$/; 
    if (uadd == null || uadd == "") { 
    alert("plz enter address"); 

    uadd.focus(); 
    } else { 
    if (uadd.match(letters)) { 
     return true; 
    } else { 
     alert('User address must have alphanumeric characters only'); 
     document.getElementById("txtpaddr").value = ""; 
     document.getElementById("txtpaddr").focus(); 
     return false; 
    } 
    } 
} 

function cntVal() { 
    var n = document.getElementById("txtpmobile").value; 
    var r1; 
    var letters = /^\d{10}$/; 
    if (n !== null || n !== "") { 
    if (n.match(letters)) { 
     r1 = alphanumeric(); 
     return r1; 
    } else { 
     alert("please enter contact number"); 
     document.getElementById("txtpmobile").value = ""; 
     document.getElementById("txtpmobile").focus(); 
     return null; 
    } 
    } else { 
    alert("please enter contact Number"); 
    return null; 
    n.focus(); 
    } 

} 

function deleteEntry(id) { 
    console.log("aaaaaaaaaaaaaaAAAA"); 

    var entry = localStorage.getItem('allEntries') JSON.parse(localStorage.getItem('allEntries')): []; 
    var index; 
    for (var i = 0; i < entry.length; i++) { 
    if (entry[i].id === id) { 
     index = i; 
     break; 
    } 
    } 
    if (index === undefined) return 
    entry.splice(index, 1); 
    localStorage.setItem('entry', JSON.stringify(entry)); 
} 

function clearstorage() { 
    localStorage.clear(); 
    window.location.reload(); 
} 

window.onload = function() { 
    showEntry(); 
}; 

Answer 1

In Ihrer Funktion deleteEntry Sie ein neues Element setzen in localstorage ‚Eintrag‘ bezeichnet. Sie stellen also nicht 'allEntries' ein und das ist wahrscheinlich der Grund, warum es so aussieht, 'allEntries' wurde nicht aktualisiert. Also setze einfach alle Einträge erneut. localStorage.setItem ('allEntries', JSON.stringify (entry));

Ihnen fehlt auch das '?' für Sie Variable 'Eintrag' ...

var entry = localStorage.getItem ('allEntries')? JSON.parse (localStorage.getItem ('allEntries')): []; < - es sollte so aussehen.

Es ist das gleiche wie eine 'else if-Anweisung'

function deleteEntry(id){ 
 
    console.log("aaaaaaaaaaaaaaAAAA"); 
 

 
     var entry = localStorage.getItem('allEntries') ? JSON.parse(localStorage.getItem('allEntries')) : []; 
 
     var index; 
 
     for (var i = 0; i < entry.length; i++) { 
 
      if (entry[i].id === id) { 
 
       index=i; 
 
       break; 
 
      } 
 
     } 
 
     if(index === undefined) return 
 
     entry.splice(index, 1); 
 
     localStorage.setItem('allEntries', JSON.stringify(entry)); <--- like this 
 

 
    }

Answer 2

Sie können ein temporäres Objekt verwenden erstellen und ersetzen Sie es dann in localstorage.