javascript - 将数据保存到本地存储时，值被覆盖

Question

我只是开始建立一个待办事项列表。我的方法是将数据保存在第一个选项卡中并将其显示在第二个选项卡上。我能够将数据保存到本地存储中。但数据对我来说越来越重要。知道我在哪里做错了。

这是我的 jsFiddle

http://jsfiddle.net/saorabh/RmCA7/

使用的 HTML 是

<form id="todo-form">
                <input type="text" name="t_title" id="t_title" placeholder="Title" />
                <textarea placeholder="Description" name="t_description" id="t_description"></textarea>
                <input type="button" class="btn btn-primary" value="Add Task"/>
              </form>

为了保存数据，我的 Javascript 是

$(".btn-primary").click(function(){
    var formId = ("todo-form");
var inputs = $("#" + formId + " :input"),
            id, title, description, tempData,
            data = {} ;

        title = inputs[0].value;
        description = inputs[1].value;

        id = new Date().getTime();

        tempData = {
            id : id,
            title: title,
            description: description
        };

        // Saving element in local storage
        data[id] = tempData;
        localStorage.setItem("todoData", JSON.stringify(tempData));

});

Answer 1

LocalStorage 是一种键/值对存储，因此对于每个键只能有一个值。

您始终将值设置为键“todoData”，因此您始终将最后一个值替换为当前值。

如果您打算仅对所有数据使用一个 key ，则应从 LocalStore 解析 JSON，附加第二项，然后将其再次存储在 LocalStorage 上。或者您可以使用多个键。

除此之外，您的代码中还有两个问题:

• 您保存了错误的对象，您应该保存数据而不是临时数据
• 您没有从以下位置重新创建 data 对象:页面加载时的本地存储

http://jsfiddle.net/RmCA7/4/