如何在localStorage中存储用户多份输入？解决数据覆盖问题

这是个很常见的小问题——你现在的代码每次都会新建一个空数组，把当前输入的数字塞进去就存回localStorage，旧数据自然就被覆盖了。要实现累加存储多个输入值，核心思路是：每次存新值前，先把localStorage里已有的数据取出来，再把新值追加进去，最后再存回去。

具体实现步骤 #

1. 取出已有数据：用localStorage.getItem('number')获取之前存储的内容，再用JSON.parse()把它转换成JavaScript数组。这里要注意，如果是用户第一次输入，localStorage里还没有数据，getItem会返回null，这时候我们要默认初始化一个空数组。
2. 获取新输入值：拿到用户当前输入的数字。
3. 追加新值到数组：把新输入的数字加到已有数组的末尾。
4. 存回localStorage：把更新后的数组再用JSON.stringify()转成字符串，存回localStorage。

完整代码示例 #

// 获取用户当前输入的内容
const inputNumber = document.getElementById('number').value;

// 从localStorage读取已有数据，若无数据则初始化为空数组
let savedNumbers = JSON.parse(localStorage.getItem('number')) || [];

// 将新输入值追加到数组中
savedNumbers.push(inputNumber);

// 把更新后的数组存回localStorage
localStorage.setItem('number', JSON.stringify(savedNumbers));

额外优化建议 #

• 如果需要存储数字类型而非字符串类型（比如后续要做数值计算），可以把输入值转换成数字：

  const inputNumber = Number(document.getElementById('number').value);
  // 或者用 parseFloat 处理小数，parseInt 处理整数
  

• 可以增加输入有效性校验，避免存入无效内容：

  const inputValue = document.getElementById('number').value;
  const inputNumber = Number(inputValue);
  
  if (!isNaN(inputNumber)) {
    let savedNumbers = JSON.parse(localStorage.getItem('number')) || [];
    savedNumbers.push(inputNumber);
    localStorage.setItem('number', JSON.stringify(savedNumbers));
  } else {
    alert('请输入有效的数字哦！');
  }
  

内容的提问来源于stack exchange，提问作者Enthel