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 ...您将其设置为localstorage长度，但是当您删除项目时，长度会更改...请尝试使用计数器，然后按++递增。

我认为你看它就像一个数组，但它真的是一个具有长度属性的对象（如字典）......你要删除键，所以长度是错误的＆＃34; ..

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循环丢失记录（在不同的页面上）

2 个答案: