javascript - localStorage.getItem(...).key 不是函数

Question

当我运行我的待办事项应用程序时，出现此错误。这是错误，

localStorage.getItem(...).key is not a function

这是代码，

$(document).ready(function(){
    //var count=localStorage.getItem("todo").length;
    $(".submit").click(function(){
        //count++;      

        localStorage.setItem("todo", JSON.stringify($('.data').val()));


        var i;
        while (localStorage.getItem("todo").key(i)) {
            var value = "<div class='todorow'><div class='todoitem'>"+JSON.parse(localStorage.getItem("todo").key(i))+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            console.log(localStorage.getItem("todo").key(i));
            i++;
        }

    });
    $(".container").on("click", ".todoitem", function(){
        jQuery(this).addClass("strike");
    });
    $(".container").on("click", ".todoremove", function(){
        jQuery(this).closest('.todorow').addClass("hide");
    });

    var i;
    while (localStorage.getItem("todo").key(i)) {
            var value = "<div class='todorow'><div class='todoitem'>"+JSON.parse(localStorage.getItem("todo").key(i))+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            i++;
    }

});

编辑:我已经更新了我的代码。它不显示任何错误，但不显示待办事项。

$(document).ready(function(){
    //var count=localStorage.getItem("todo").length;
    $(".submit").click(function(){
        //count++;      

        localStorage.setItem("todo", JSON.stringify($('.data').val()));

        var data;
        data = localStorage.getItem("todo");
        var i;
        while (data[i]) {
            var value = "<div class='todorow'><div class='todoitem'>"+data[i]+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            console.log(data[i]);
            i++;
        }

    });
    $(".container").on("click", ".todoitem", function(){
        jQuery(this).addClass("strike");
    });
    $(".container").on("click", ".todoremove", function(){
        jQuery(this).closest('.todorow').addClass("hide");
    });
    var data=localStorage.getItem("todo")
    var i;
    while (data[i]) {
            var value = "<div class='todorow'><div class='todoitem'>"+data[i]+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            i++;
    }

});

编辑2:我能够通过以下更新使页面正常工作，

$(document).ready(function(){
    var count=localStorage.length;// get count
    console.log($('.data').val());  // whats in the todo 0
    console.log(localStorage.length); // how much data is in the storage

    var data = new Array();

    var i=0;
        while (i<localStorage.length) {
            data[i]=localStorage.getItem('todo'+i);
            console.log(data[i]);
            i++;
        }
    //var count=localStorage.getItem("todo").length;
    $(".submit").click(function(){
        //count++;      
        data.push($('.data').val());
        localStorage.setItem("todo"+count,$('.data').val());
        count++;
        var i=0;
        $(".todorow").addClass("hide");
        while (i<localStorage.length) {
            var value = "<div class='todorow'><div class='todoitem'>"+data[i]+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            console.log(data[i]);
            i++;
        }

    });
    $(".container").on("click", ".todoitem", function(){
        jQuery(this).addClass("strike");
    });
    $(".container").on("click", ".todoremove", function(){
        jQuery(this).closest('.todorow').addClass("hide");
    });

    var i=0;
        while (i<localStorage.length) {
            var value = "<div class='todorow'><div class='todoitem'>"+data[i]+"</div><div class='todoremove'>X</div></div>";
            $(".container").append(value);
            console.log(data[i]);
            i++;
        }

});

Answer 1

localStorage.setItem() 仅适用于字符串。因此，当您调用 localStorage.setItem('todo', somedata) 时，它会替换 'todo' 值，而不是添加它。

类似地，localStorage.getItem() 返回字符串(或 null - 所以也请检查一下)。

如果您想将 localStorage 用于待办事项列表，则类似以下内容可能会起作用...

// Save your todos array:
var todos = [];  // Empty array if no todos, or you could have todo data already.
localStorage.setItem('todos', JSON.stringify(todos));


// Load your todos array:
var loadedTodos = JSON.parse(localStorage.getItem('todos'));

var specificTodo = loadedTodos[4];  // Get a specific todo by array index
specificTodo.title = 'abcd';  // Access props
specificTodo.completed = false;  // Access props


// To add a new item to your list of stored todos:
var todos = JSON.parse(localStorage.getItem('todos'));  // Load the array
todos.push({ title: 'Do some stuff', completed: false });  // Add to the array
localStorage.setItem('todos', JSON.stringify(todos));  // Save the array