Question

我正在尝试将输入字段中的值插入到数组中然后将其存储在localstorage中，但问题是每次插入新值时它都会替换旧值，而我希望将其添加到现有值中。如果这是一个愚蠢的问题，请耐心等待，我是新手：）

<html>
<body>

  <form>
    <input id="textInput" type=text>
    <input type=button onclick="myFunction()" value="Add Number"/>
  </form>
  <div id="output"><div>

  <script>
    function myFunction() {
      var sports = ["soccer", "baseball"];
      var newSport = document.getElementById('textInput').value;
      sports.push(newSport)
      window.localStorage.setItem("sportskey", sports);
      document.getElementById('output').innerHTML = window.localStorage.getItem('sportskey');
    }
  </script>

</body>
</html>

Answer 1

您的sports变量是函数的本地变量，因此每次函数运行时它都会重新初始化。要修复它，请将声明移到函数外部。

另外，正如@RocketHazmat指出的那样，你只能存储一个字符串。因此，您的新代码段应如下所示：

var sports = ["soccer", "baseball"]; //global scope
function myFunction() {
  var newSport = document.getElementById('textInput').value;
  sports.push(newSport)
  window.localStorage.setItem("sportskey", JSON.stringify(sports)); // store as a string
  document.getElementById('output').innerHTML = window.localStorage.getItem('sportskey');
}

Answer 2

问题在于变量的范围。您的sports数组必须在myFunction（）函数之外声明

<script>
    var sports = ["soccer", "baseball"];
     function myFunction() {

      var newSport = document.getElementById('textInput').value;
      sports.push(newSport );
      var myString= JSON.stringify(sports);

      window.localStorage.setItem("sportskey", myString);
      document.getElementById('output').innerHTML = window.localStorage.getItem('sportskey');
    }
  </script>

Answer 3

每次调用sports时，您都在重新创建 myFunction()数组。每次添加新元素时，都是从头开始，添加第3个元素，忽略已添加的其他元素。

仅在localStorage中不存在的数组中创建数组。

P.S。您不能将数组存储在本地存储中，只能存储字符串。您需要转换为/从JSON转换才能使其正常工作。

function myFunction() {
  var sports = JSON.parse(window.localStorage.getItem('sportskey')) || ["soccer", "baseball"];
  var newSport = document.getElementById('textInput').value;

  sports.push(newSport)

  var json = JSON.stringify(sports);
  window.localStorage.setItem("sportskey", json);
  document.getElementById('output').innerHTML = json;
}

DEMO：http://jsfiddle.net/EhH8C/

Answer 4

Aaargh ......我的回答太迟了;）

是的，每次调用方法时都要重新创建数组，并且在从localStore加载项时，应该在存储项和JSON.parse（string_from_localStore）时调用JSON.stringify（Array）。

但是你应该将stringify包装在try和catch块中，因为当json字符串格式不正确，你的stringify方法崩溃了函数并且它停止工作时，这可能是一些原因。

var myFunc = function() {
      //load it at first from localstorage
      var sports = ["soccer", "baseball"];
      var localSports = [];
      try {
          localSports = JSON.parse(window.localStorage.getItem('sportskey'));
          if( localSports == null)
              localSports = sports;
      } catch(ex) {
          console.log("something wrong");
          localSports = sports; //fallback
      }
      var newSport = document.getElementById('textInput').value;
      localSports.push(newSport); //this is an array
      //insert the array with JSON.stringify so you can take it later out and rework with it          
      window.localStorage.setItem("sportskey", JSON.stringify(localSports));
      output.innerHTML = window.localStorage.getItem('sportskey');
};

以下是jsfiddle的链接：

http://jsfiddle.net/bgh7f/

输入字段到数组的值 - Javascript，localstorage

4 个答案: