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

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 时，您使用键 'input' 和变量的值保存在本地存储项目中。为了读回你的价值，你需要使用 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"))

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

How can i save inputs to my browser's local storage?

javascript

arrays

function

local-storage