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

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个不同的键造成的。 您正在使用TemasEFrases作为设置项目的键，但是在检索时，您正在使用Items作为键。 尝试在两个地方使用Items 。

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

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <body>

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

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

    <p>Items:</p>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
    <ul id="result"></ul>
</body>
</html>

JS

$(document).ready(function () {
  var localstorageItems = JSON.parse(localStorage.getItem('Items'));
  var items = localstorageItems || [];

  showItems();


  $('#submit').click(function(event) {
    event.preventDefault();

    var newitem = $("#type").val()

    if (newitem) {
      items.push(newitem);
      $('#type').val('');

      localStorage.setItem('Items', JSON.stringify(items));
      showItems();
    }
  });

  function showItems () {
    if (items && items.length > 0) {
      var result = items.map(function (item) {
        return '<li>'+item+'</li>';
      });

      $('#result').html(result);
    }
  };
});

这是工作代码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 个解决方案

解决方案1
0 2019-09-05 17:39:21

解决方案2
0 已采纳 2019-09-05 17:51:25

解决方案3
0 2019-09-05 17:52:54

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

问题描述

3 个解决方案

解决方案1 0 2019-09-05 17:39:21

解决方案2 0 已采纳 2019-09-05 17:51:25

解决方案3 0 2019-09-05 17:52:54

解决方案1
0 2019-09-05 17:39:21

解决方案2
0 已采纳 2019-09-05 17:51:25

解决方案3
0 2019-09-05 17:52:54