如何将输入保存到浏览器的本地存储中？

Question

我使用 jQuery 制作了一个待办事项列表应用程序，它工作正常，但我意识到每当我刷新我的页面时，待办事项就会消失，它完全消失了。 我已经在网上寻找可能的解决方案来解决这个问题，我发现它可以用 windows.localStorage 属性来解决。 但我真的不能让它按我的预期工作。 我想要一种情况，每当我刷新我的页面时，浏览器应该记住并保持输入的待办事项。 以下是我的代码示例：

$("ul").on("click", "li", function() {
    $(this).toggleClass("selected");
});
$("ul").on("click", "span", function(event) {
    $(this).parent().fadeOut(500, function() {
        $(this).remove()
    });
    event.stopPropagation();
});

$("input[type='text'").keypress(function(event) {
    if(event.which === 13) {
        var toDoText = $(this).val();
        $(this).val("");
        $("ul").append("<li><span><i class='fas fa-trash'></i></span> " + toDoText + "</li");
        localStorage.setItem("input", toDoText);
    }
});
$(".fa-pen").click(function() {
$("input[type='text'").fadeToggle();
})

Answer 1

当您使用 setItem 时，您使用键“输入”和 var 值保存在本地存储项目中。 为了读取您的值，您需要使用localStorage.getItem("input")这将获取您存储的项目。 顺便说一句，如果您使用 chrome，您可以实时查看存储数据。 https://developers.google.com/web/tools/chrome-devtools/storage/localstorage现在您应该编写代码，从存储中读取您的项目并在其存在时显示它。 试着想想你想如何存储你的待办事项数组的数据，json 等等。 请记住，如果您选择将数据存储在 json 类型中，则必须对其进行转换然后对其进行解析，例如： localStorage.setItem("input", JSON.toStringify([{"comment": "my first comment"}, {"comment": "my second comment"}])); 当你想获取数据时： var myComments = JSON.parse(localStorage.getItem("input"))