頁面刷新后不保存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