Question

新手在这里。我正在开发一个具有数组的项目，该项目允许用户通过在文本框中键入新项目然后单击“提交”按钮来将新项目添加到数组中。我做到了，这样当我卸载页面时该数组将转换为JSON，而在再次加载该页面时将转换回JavaScript。我的脚本可以将项目保存到本地存储一段时间。经过一些代码重构后，程序突然停止保存我的项目在页面刷新中。我想对其进行编程，以便即使关闭计算机也可以保存它。

我尝试过在线搜索问题的解决方案，但似乎没有人遇到类似的问题。

我的代码：

<body onload="Items" onunload="JSONItems">

    <textarea id="type" rows="2" cols="25"></textarea>

    <button id="submit" type="button">Submit</button>

    <script type="text/javascript">

        var Items = JSON.parse(localStorage.getItem("Items"))
        var JSONItems = localStorage.setItem("Items", JSON.stringify(Items))

        if (!Items) Items= []

        $("#submit").click(function() {
            var newitem = $("#type").val()
            if (newitem) {
                Items.push(newitem)
                $("#type").val("")
            }
        })

    </script>

</body>

你能告诉我吗？

Answer 1

我怀疑问题是由于2个不同的键引起的。您将exit(2)用作设置项目的键，而检索时却将cgroup_exit()用作键。尝试在两个地方都使用TemasEFrases。

假设您使用jQuery进行DOM操作，我已经在Items上创建了一个有效的代码段。

HTML

Items

JS

JS Bin

这是工作代码https://jsbin.com/yoqoyoxiza/edit?html,js,output

的链接

Answer 2

是的，我们遇到了一些代码问题。此片段工作正常。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  </head>
  <body onload="LoadItems()" onunload="saveItems()">
    <div>
      <textarea id="inputBox" rows="2" cols="25"></textarea>
      <button id="submit" type="button">Submit</button>
    </div>
    <div>
      <p>Data in storage</p>
    </div>
    <div>
      <textarea id="showData" rows="2" cols="25"></textarea>
    </div>

    <script type="text/javascript">
      var Items = [];
      function LoadItems() {
        debugger;
        Items = JSON.parse(localStorage.getItem("Items"));
        if (!Items) Items = [];
        $("#showData").val(JSON.stringify(Items));
      }

      function saveItems() {
        var JSONItems = localStorage.setItem("Items", JSON.stringify(Items));
      }

      $("#submit").click(function() {
        var newitem = $("#inputBox").val();
        if (newitem) {
          Items.push(newitem);
          $("#inputBox").val("");
        }
      });
    </script>
  </body>
</html>

Answer 3

每次更改后，您需要将其保存到本地存储中：

 $("#submit").click(function() {
        var newitem = $("#type").val();
        if (newitem) {
            Items.push(newitem);
            $("#type").val("");
            // HERE:
            localStorage.setItem("Items", JSON.stringify(Items));
        }
 })

页面刷新后未保存JSON本地存储

3 个答案: