從本地存儲打印json對象

Question

我需要打印用戶通過文本框輸入的json對象數組，此功能通過單擊按鈕執行。 我需要存儲用戶在文本框中輸入的所有字符串區域設置。 並在此格式[{"aaa"},{"bbb"},{"ccc"}]控制台中顯示它

<!DOCTYPE html>
<html>
  <body>
    Enter the string :
    <input type="text" id="names">
    <button onclick="myFunction()"> Click Me</button>

    <script>
    function myFunction(){
      var myNames = new Array();
      myNames = document.getElementById("names").value;
      this.names = myNames; 

      localStorage["myNames"] = JSON.stringify(myNames);
      console.log(JSON.stringify(myNames));

      var name = JSON.parse(localStorage["myNames"]);
      console.log(name);
    };
    </script>
  </body>
</html>

目前，此代碼僅打印類似"aaa"的數據，如果我添加另一個數據bbb ，則僅顯示第二個數據"bbb" 。 我希望在此格式[{"aaa"},{"bbb"},{"ccc"}]查看所有數據，甚至像這樣[[“ name”：“ aaa”}，{“ name”： “ bbb”}，{“ name”：“ ccc”}]]。 有人可以幫我嗎？

Answer 1

這與localStorage或JSON不相關。 當您執行myNames = document.getElementById("names").value; 您將空數組替換為字符串。

您可以在數組上使用.push： https : //developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push

並創建一個對象然后將其推送，例如myObj = {'v': value}; myArray.push(myObj); myObj = {'v': value}; myArray.push(myObj);

Answer 2

您可以嘗試以下方法：

    var myNames = []

    function myFunction(){
        var oldItems = JSON.parse(localStorage.getItem('myNames')) || [];

         newItem = {"name":document.getElementById("names").value};
         oldItems.push(newItem);

        localStorage.setItem("myNames", JSON.stringify(oldItems));

        console.log(JSON.parse(localStorage.getItem("myNames")));
    };

Answer 3

如果要保留以前輸入的數據，則必須先檢索它們並進行更改。

以下是兩個功能； 一個將項添加到數組的項。 如果該陣列尚不存在（因此以前沒有輸入任何數據），它將為您創建一個新的陣列。

之后，它將數據再次存儲在localStorage中。

輸入需要添加的新數據后，它首先檢索任何先前的條目並進行更改。 然后再次存儲，依此類推。

function myFunction(){
  var myNames = localStorage.getItem('myNames'),
        parsedArray = JSON.parse(myNames),
        valueToAdd = document.getElementById("names").value;

  // Add the new item to the original array.
  parsedArray = addToArray(parsedArray, valueToAdd);
  localStorage.setItem('myNames', JSON.stringify(parsedArray));

  console.log(parsedArray);
};

function addToArray (array, item) {
  // If the array doesn't exist, create one
  if (!array) {
    array = [];
  }

  // Add the item to the array.
  array.push(item);

  return array;
};

從本地存儲打印json對象

問題描述

3 個解決方案

解決方案1
4 2016-03-11 12:54:21

解決方案2
3 已采納 2016-03-11 12:57:44

解決方案3
1 2016-03-11 12:56:19

從本地存儲打印json對象

問題描述

3 個解決方案

解決方案1 4 2016-03-11 12:54:21

解決方案2 3 已采納 2016-03-11 12:57:44

解決方案3 1 2016-03-11 12:56:19

解決方案1
4 2016-03-11 12:54:21

解決方案2
3 已采納 2016-03-11 12:57:44

解決方案3
1 2016-03-11 12:56:19