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

Value from input field into array - Javascript, localstorage

本文关键字：Javascript localstorage 输入 字段 数组      更新时间：2023-09-26

我试图从输入字段插入值到一个数组，然后将其存储在本地存储，但问题是每次我插入一个新值，它取代旧值，而不是我希望它被添加到现有的值。如果这是一个愚蠢的问题，请原谅我，我是一个新手:)

<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>

您的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');
}

问题在变量的范围内。你的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>

啊…我回答得太晚了;)

是的，每次方法被调用时你都要重新创建数组，你应该调用JSON.stringify(array)来存储项目，当从localStore加载项目时调用JSON.parse(string_from_localStore)。

但是你应该把stringify封装在一个try and 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/

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

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

注:你不能在本地存储中存储数组，只能存储字符串。您需要将JSON转换为/从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;
}

演示:http://jsfiddle.net/EhH8C/

相关文章：