javascript - 如何将用户的多个输入存储到localStorage？

Question

所以我有一个输入字段，要求用户输入一个数字:

<label for="amount"><b>Amount</b></label>
<input type="text" placeholder="Enter Number" name="number" id="number" required>   

我想要做的是将其存储在 localStorage 中: 这是我的脚本:

var number = document.getElementById('number').value;
var aNumber = [];
aNumber.push(number);
localStorage.setItem('number',JSON.stringify(aNumber));

但是，该脚本可以工作，当用户输入新值时，它会覆盖旧值。因此始终只存储一个值。 我想要它，以便它能够存储所有值。

提前致谢。

Answer 1

它将覆盖，因为您总是创建一个新数组，而不是使用旧数组(如果存在)。您需要按如下方式更改代码:

var aNumber = !!localStorage.getItem('number') ? JSON.parse(localStorage.getItem('number')) : [];
var number = document.getElementById('number').value;
aNumber.push(number);
localStorage.setItem('number', JSON.stringify(aNumber));

上面的代码首先检查数组是否存在，如果存在，则代码使用相同的数组，否则创建一个新数组。

PS:由于重复执行 JSON.parse 和 JSON.stringify 方法，随着数组中项目数量的增加，此代码最终会变得太慢。