删除 2 条记录后 localStorage 循环丢失记录（在不同的页面上）

Question

当我使用我的表单添加记录时，似乎一切正常。它们都很好地显示在页面上。当我按下每条记录生成的删除按钮时，它会删除记录并重新加载页面。这也有效。不过，我第二次这样做时，我的记录似乎消失了。

例如，我添加了 5 条记录，标题为：a,b,c,d,e。他们出现了，我删除了记录 b，列表重新加载了 a、c、d、e 没有问题。当我从新生成的列表中删除 c 时，我的 e 记录消失了，所以它只显示 a 和 d。

很明显我做错了什么，我希望有人能告诉我那是什么。如果这种编程方式不好，请告诉我在哪个方向寻找正确的方法。

我有 3 个单独的页面：

存储记录：

function storeEntry(){
    var myId = localStorage.length;
    addBtn.addEventListener("touchstart", submitEntry, false);
    addBtn.addEventListener("mousedown", submitEntry, false);

    function submitEntry(event) {
        //Get the form data to store in the Array
        var myTitle = document.getElementById("myTitle").value;
        var myDate = document.getElementById("myDate").value;
        var myContent = document.getElementById("myContent").value;
        //Fill array that will be placed in localstorage
        var myArray = [myId,myTitle,myDate,myContent];
        //Store it as a json string
        localStorage.setItem(myId, JSON.stringify(myArray));
        //Provide feedback
        alert("Item: " + myTitle + " has been added with id: "+myId);
        //Id +1 zodat het volgende item een uniek id krijgt.
        myId=myId+1;
        //Clear the form
        setFields();
    }
}

删除记录：

function deleteEntry(){
    var key=localStorage.key(this.i);
    this.removeEventListener("click",deleteEntry);
    localStorage.removeItem(key);
    alert("Item : "+key+" is verwijderd!");
    window.location.href = "showEntry.html";
}

最后是显示记录：

function loadEntries(){
    var myEntryBox = document.getElementById("entryBox");
    var myvar="";
    for(var i=0;i<=localStorage.length;i++){
        if(localStorage.getItem(i)!==null) {

            var myData = JSON.parse(localStorage[i]);
            myvar = myvar +"-------------------"+ myData;
            var newNode = document.createElement('div');
            newNode.innerHTML = myData;
            myEntryBox.appendChild( newNode );

            var delButton = document.createElement('button');
            delButton.innerHTML = "Del";
            delButton.i=myData[0];
            newNode.appendChild(delButton);
            alert("This node id is: "+myData[0]);
            delButton.addEventListener("click",deleteEntry);

        }
        else{
            alert("Geen data");
        }

        document.getElementById("log").innerHTML = myvar;
    }
}

Answer 1

我认为问题出在您的密钥 ID 上...您正在将其设置为本地存储长度，但是当您删除一个项目时，长度会发生变化...请尝试使用计数器并递增 ++。

我认为您将其视为一个数组，但它实际上是一个长度为属性的对象（如字典）...您正在删除键，因此长度为 "wrong"..

var counter = 0;

function storeEntry(){
    counter++;
    var myId = counter;
    addBtn.addEventListener("touchstart", submitEntry, false);
    addBtn.addEventListener("mousedown", submitEntry, false);

    function submitEntry(event) {
        ...
        //Id +1 zodat het volgende item een uniek id krijgt.
        //myId=myId+1; <-- no need anymore
    }
}

您需要修复删除....

Answer 2

我已经解决了我的问题，

在 showEntry 页面上，我正在循环：

for(var i=0;i<=localStorage.length;i++){
    if(localStorage.getItem(i)!==null) {

        var myData = JSON.parse(localStorage[i]);

我已将其更改为：

for(var i=0;i<=localStorage.length;i++){
    var myKey=localStorage.key(i);
    if(localStorage.getItem(myKey)!==null) {

localStorage.getItem 试图从 i 变量中找到与某些键匹配的项目，但这会导致错误，因为存储的键名在删除项目后可能比 localstorage 的长度长得多。

删除 2 条记录后 localStorage 循环丢失记录（在不同的页面上）

localStorage loop missing records after deleting 2 records ( on a different page )

javascript

local-storage