Question

当我运行我的todo应用程序时出现此错误。这是错误，

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

Answer 2

如果localStorage.getItem('todo')返回一个对象，那么如果你想访问这个对象的属性，你应该先解析它parse(localStorage.getItem("todo"))

然后，如果您需要使用变量访问属性，则必须使用[]符号而不是.符号

var obj = JSON.parse(localStorage.getItem("todo"));
obj[key(i)]

最后如果你想循环一个对象，你必须使用for of而不是while

Answer 3

代码有几个问题。我能够使用下面的调整来实现它，

$(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++;
        }

});

localStorage.getItem（...）。key不是函数

3 个答案: