如何在localStorage中向数组添加数据？解决数据被覆盖问题

现有代码的问题 #

• 处理标题存储时，else分支仅将新标题包装成数组后push到原数组，但没把更新后的数组重新存回localStorage，导致修改不生效，下次获取还是旧数据，看起来像被覆盖。
• 处理描述存储时，写错了变量名：把描述数组push到了标题数组titl里，而非目标数组descriptio，同样没存回localStorage。
• 变量t、d未声明，会成为全局变量，存在意外覆盖的风险。

修复后的代码 #

function store(title, description) {
  // 获取现有标题数组，不存在则初始化为空数组
  let titl = JSON.parse(localStorage.getItem("titl")) || [];
  // 获取现有描述数组，不存在则初始化为空数组
  let descriptio = JSON.parse(localStorage.getItem("descriptio")) || [];

  // 添加新标题到数组
  titl.push(title);
  // 将更新后的数组存回localStorage
  localStorage.setItem("titl", JSON.stringify(titl));

  // 添加新描述到数组
  descriptio.push(description);
  // 将更新后的数组存回localStorage
  localStorage.setItem("descriptio", JSON.stringify(descriptio));
}

更合理的优化方案 #

把标题和描述作为对象存在同一个数组中，避免分开存储的维护麻烦：

function store(title, description) {
  // 获取现有条目数组，不存在则初始化为空数组
  let items = JSON.parse(localStorage.getItem("items")) || [];
  // 添加新的条目对象
  items.push({ title, description });
  // 存回localStorage
  localStorage.setItem("items", JSON.stringify(items));
}

// 读取所有条目的示例函数
function getItems() {
  return JSON.parse(localStorage.getItem("items")) || [];
}

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