localStorage.getItem(..).键不是函数

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

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++;
}
});