使用2个html5 Localstorage应用程序问题

Question

所以我一直在使用2个不同的Localstorage应用程序来完成我已经给出的任务。一个是待办事项列表，另一个是同一个html文件上的注释。

现在，待办事项列表中有3个localstrorage键。一个用于待办事项的价值。第二个是todo的顺序（第一个，第二个，第三个等）和第三个你一般有多少todo。这就是3个不同的值。

对于注释是1 localstorage Key及其所有值。 （见下图）

现在的问题是：如果我有3个音符然后我添加了一个待办事项我在本地存储上得到了这个：

这是正常的。

但是，如果我添加另外两个音符，我会得到这个：

这是合乎逻辑的，但最后两个音符未显示。

另一个例子：

虽然有4个，但不显示任何注释。

我不知道如何解释这个问题，但基本上发生的事情是在todo-ID之后写入localstorage的内容，但没有显示，但请注意todoList保持完美运行。

我不太确定问题是什么，但我认为可能是它的加载方式。也许???

以下是我加载笔记的方法：

var initStickies = function initStickies() {
    $("<div />", { 
        text : "+", 
        "class" : "add-sticky",
        click : function () { createSticky(); }
    }).prependTo(document.body);
    initStickies = null;
},
openStickies = function openStickies() {
    initStickies && initStickies();
    for (var i = 0; i < localStorage.length; i++) {
        createSticky(JSON.parse(localStorage.getItem(localStorage.key(i))));
    }
}

这就是我加载todo-list的方式：

orderList = localStorage.getItem('todo-orders');

orderList = orderList ? orderList.split(',') : [];

for( j = 0, k = orderList.length; j < k; j++) {
    $itemList.append(
        "<li id='" + orderList[j] + "'>"
        + "<span class='editable'>" 
        + localStorage.getItem(orderList[j]) 
        + "</span> <a href='#'>X</a></li>"
    );
}

问题可能是什么？有没有人之前有这个问题？

非常感谢您的阅读和抱歉。我想尽可能清楚。我一直在想如何解决这个问题很长一段时间，我即将陷入死胡同。希望可以有人帮帮我。再次感谢

Answer 1

在笔记应用程序中，您尝试遍历localStorage中的每个项目并将其解析为JSON。当它获得JSON字符串时，它会成功解析它并继续其工作。当它收到您的待办事项时，它会中断并停止工作。如果你想在一个localStorage中同时拥有todo和note，你最好有办法区分它们。一种简单的方法是将todo-作为todo项目的前缀（正如您已经完成的那样）和note-作为注释项目的前缀。

代码的一个可能的快速解决方法是使用try ... catch ...来避免非JSON字符串破坏您的迭代：

for (var i = 0; i < localStorage.length; i++) {
    try {
        createSticky(JSON.parse(localStorage.getItem(localStorage.key(i))));
    } catch (error) { /* do nothing and just skip */ }
}