Question

我需要打印一个由用户通过文本框输入的json对象数组，该功能通过按钮点击执行。我需要存储用户在文本框中输入的所有字符串localy。并在此格式[{"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);

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 个答案: