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

【问题标题】：How can i save inputs to my browser's local storage?如何将输入保存到浏览器的本地存储中？
【发布时间】：2021-02-23 17:02:29
【问题描述】：

我使用 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();
})

【问题讨论】：

localStorage.getItem
我已经尝试过 localStorage.getItem，但它似乎正在错误地实施它
那么也包括错误的实现，这样我们就可以看到哪里出了问题。

标签： javascript arrays function local-storage

【解决方案1】：

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

【讨论】：