尝试使用 localStorage 将用户输入的文本存储在文本区域中，但保存和重新加载按钮不起作用

Question

我正在尝试使用 localStorage 将用户输入的文本存储在 textarea 中 - 我有一个用于将数据保存到 localStorage 的“保存”按钮和一个用于将数据检索到 localStorage 的“重新加载”按钮。

然而，即使我收到屏幕警报并且控制台告诉我按钮工作正常，每次我将数据输入文本区域并单击“保存”，然后删除数据并单击“重新加载”，没有重新加载。

奇怪的是，如果我刷新页面并单击“重新加载”，它会重新加载，但如果我连续在同一页面上则不会。

我很困惑为什么 - 我没有正确使用 localStorage 吗？我的 JavaScript 功能有问题吗？

这是我的代码：

<html>
<head></head>
<body>
To Do:<p>
<textarea id="todo" cols="50" rows="10">
</textarea><p>
<button id="save">Save</button>
<button id="reload">Reload</button>

<script type="text/javascript">

//save entered info
document.getElementById("save").addEventListener("click", function ()
    {
        var todo = document.getElementById("todo").value ;
        localStorage.setItem("todo", todo) ;
        alert("Saved To-Do List") ;
        console.log("Saved To-Do List")
    } , false);

//reload last session
document.getElementById("reload").addEventListener("click", function ()
    {
        document.getElementById("todo").innerHTML = localStorage.getItem("todo");
        alert("Reloaded To-Do List") ;
        console.log("Reloaded To-Do List")
    } , false);
    
</script>
</body>
</html>

Answer 1

替换此行document.getElementById("todo").innerHTML ='Your code' 对此 document.getElementById("todo").value ='Your code' .

试试这个代码吧

<html>

<head></head>

<body>
  To Do:<p>
    <textarea id="todo" cols="50" rows="10">
</textarea>
  <p>
    <button id="save">Save</button>
    <button id="reload">Reload</button>

    <script type="text/javascript">

      //save entered info
      document.getElementById("save").addEventListener("click", function () {
        var todo = document.getElementById("todo").value;
        localStorage.setItem("todo", todo);
        alert("Saved To-Do List");
        console.log("Saved To-Do List")
      }, false);

      //reload last session
      document.getElementById("reload").addEventListener("click", function () {
        document.getElementById("todo").value = localStorage.getItem("todo");
        alert("Reloaded To-Do List");
        console.log("Reloaded To-Do List")
      }, false);

    </script>
</body>

</html>

尝试使用 localStorage 将用户输入的文本存储在文本区域中，但保存和重新加载按钮不起作用

Trying to use localStorage to store user-inputted text in textarea, but Save and Reload buttons are not working

html

javascript

jquery

addeventlistener

local-storage