如何停止覆盖对象值

Question

我创建了一个函数，其中将表单的输入值收集在一个对象中，然后将整个对象压入一个数组并将该数组保存在本地存储中...但是问题是当我更改值并再次注册时旧值将被新值覆盖，但我希望它按数组的索引1，以便我的数组包含2个对象，依此类推...请帮助我，谢谢。

  <script> var labelsarray = document.getElementsByTagName("label"); var inputsarray = document.getElementsByTagName("input"); var array = []; function subm() { var users = { FirstName: inputsarray[0].value, LastName: inputsarray[1].value, UserName: inputsarray[2].value, Password:  inputsarray[3].value, DateofBirth: inputsarray[4].value, Age: inputsarray[5].value, Purpose: "" }; if (inputsarray[6].checked === true) { users.Gender = "Male"; } else if (inputsarray[7].checked === true) { users.Gender = "Female"; } if (inputsarray[8].checked === true) { users.Purpose += " Storing Apps"; } if (inputsarray[9].checked === true) { users.Purpose += " Storing Sites"; } if (inputsarray[10].checked === true) { users.Purpose += " Fun"; } array.push(users); for (var i=0;i<array.length;i++) { localStorage.setItem("User Data: ", JSON.stringify(array[i])); } } </script> 

  <div> <center> <form action="Javascript:void(0);"method="post" onsubmit="subm();"> <label for="fname">First Name:</label>&emsp; <input type="text" id="fname" /> <br/> <label for="lname">Last Name:</label>&emsp; <input type="text" id="lname" /> <br/> <label for="uname">User Name:</label>&emsp; <input type="text" id="uname" /> <br/> <label for="pass">Password:</label>&emsp;&ensp;&nbsp; <input type="text" id="pass" /> <br/> <label for="dob">Date of Birth:</label>&emsp;&emsp;&nbsp; <input type="date" id="dob" /> <br/> <label>Age:</label>&emsp;&emsp;&emsp;&emsp;&emsp; <input type="text" id="age" /> <br/> <span>Gender:</span>&emsp;&emsp;&emsp;&emsp;&ensp; <input type="radio" name="gender" id="male" /> <label for="male">Male</label> <input type="radio" name="gender" id="female" /> <label for="female">Female</label> <br/> <p>For what purpose(s) you are making account?</p> <input type="checkbox" id="app" name="purpose" value="storingapps" /> <label for="app">Storing Apps</label> <input type="checkbox" id="site" name="purpose" value="storingsites" /> <label for="site">Storing Sites</label> <input type="checkbox" id="fun" name="purpose" value="fun" /> <label for="fun">Fun</label> <br/> <input type="submit" value="Submit" class="button" /> </form> </center> </div> 

Answer 1

每次保存到本地存储中时，您只会保存最后一项。 因为每个保存都将被下一个保存替换，并且只有最后一个保存可见。 相反，您只需要将阵列保存到本地存储中

// (not needed) for (var i=0;i<array.length;i++) {
    localStorage.setItem("User Data: ", JSON.stringify(array));
// (not needed) }

现在您的本地存储将具有对象数组

Answer 2

您每次都在重新创建阵列，而不是从本地存储中读取它。 因此，您每次都从一个全新的数组开始。

您在哪里做var array = []; 您应该从本地存储读取。

例如：

var array = [];
var savedArrayJSON = localStorage.getItem("userData");

if (savedArray) {
   try {
     array = JSON.parse(savedArrayJSON);
   } catch (e) {
     // Probably do nothing
   }
}

...

array.push(users);

// No more for-loop
localStorage.setItem("userData", JSON.stringify(array));

Answer 3

设置阵列后，您将遍历整个阵列，并且在每次迭代时，都将覆盖localStorage上一次迭代中的User Data键，因此仅存储了最后一个数组项：

for (var i=0;i<array.length;i++) {
  localStorage.setItem("User Data: ", JSON.stringify(array[i]));
}

您应该将整个阵列设置为本地存储，或者使用以下不同的键来存储单个项：

localStorage.setItem("User Data: ", JSON.stringify(array));

接下来，每次有人访问您的页面时，您都会创建一个新的空数组，那么localStorage中的数据何时才能被提取和使用？ 访问页面后，您应该获取已保存的数据，以便可以将更多数据推送到其中：

// Set the array variable equal to the array in localStorage or an empty array
var array = JSON.parse(localStorage.getItem("User Data")) || [];

补充笔记：

您的HTML无效，并且采用了过时的方法。

Javascript:void(0);

不只是大写（应该是： javascript:void() ），而且不应该像onsubmit （ HTML事件处理属性 ）那样使用不做任何事情的整个技术。 您所有的JavaScript均应使用专用脚本，并且事件处理应使用element.addEventListener()来完成。

已弃用<center> 。 所有格式均应使用CSS完成。

<input>和<br>元素不应在标签末尾使用/>的XML自终止语法。 尽管这是合法的，但这是2000年遗留下来的遗物，当时全世界都认为XML将成为未来。 它不会在代码中给您带来任何好处， 如果使用不当，可能会导致错误 。

Answer 4

您可以尝试以下代码，这是因为每次创建新用户时都会覆盖localStorage值。一种简单的解决方案是将用户存储为数组格式，并在每次新用户填写表格时将新用户附加到该数组中，然后将其保存到localStorage。

```

<script>


 var labelsarray = document.getElementsByTagName("label");
  var inputsarray = document.getElementsByTagName("input");

  //Here We first Grab the already stored value from the localStorage and parse it because it is in string format.

  var array = JSON.parse(localStorage.getItem('User Data: ')) || [];

  function subm() {
      var users = {
          FirstName: inputsarray[0].value,
          LastName: inputsarray[1].value,
          UserName: inputsarray[2].value,
          Password:  inputsarray[3].value,
          DateofBirth: inputsarray[4].value,
          Age: inputsarray[5].value,
          Purpose: ""
      };
      if (inputsarray[6].checked === true) {
          users.Gender = "Male";
      }
      else if (inputsarray[7].checked === true) {
          users.Gender = "Female";
      }
      if (inputsarray[8].checked === true) {
          users.Purpose += " Storing Apps";
      }
      if (inputsarray[9].checked === true) {
          users.Purpose += " Storing Sites";
      }
      if (inputsarray[10].checked === true) {
          users.Purpose += " Fun";
      }

  //We Now append the users to the array and save it to localStorage.
      array.push(users);
      localStorage.setItem("User Data: ", JSON.stringify(array));          
  }

我希望这对你也有用。