JavaScript使用localStorage存储输入数据时旧值被覆盖如何解决

你当前代码的核心问题有三个：

1. 每次页面加载都直接使用硬编码的初始links对象，没有优先读取localStorage中已存储的历史数据，导致刷新页面后之前存储的内容被初始值覆盖
2. 表单按钮未阻止默认提交行为，点击按钮会触发页面刷新，刚写入的存储数据会被重置的初始值覆盖
3. 没有编写新增数据后的页面渲染逻辑，新存储的内容自然不会展示在页面上

1. 初始化时优先读取本地存储 #

页面加载时先判断localStorage中是否有已存储的links数据，有则直接用存储数据初始化links对象，没有再用默认的初始值：

// 优先从localStorage取数据，没有才用默认值
let links = localStorage.getItem('links') ? JSON.parse(localStorage.getItem('links')) : {
  team1: {
    icon: "FCL.png",
    list: [{ name: "Real Madrid", url: "www.Real Madrid.com" }]
  },
  team2: {
    icon: "FCL.png",
    list: [{ name: "FC Barcelona", url: "www.FCB.com" }]
  },
  fav: {
    icon: "fav.png",
    list: []
  }
};

2. 阻止表单默认提交行为 #

点击提交按钮时先阻止默认的表单提交刷新操作，避免页面重置，操作完数据后同步写入localStorage：

$("#click").click(function (e) {
  // 阻止表单默认提交刷新页面
  e.preventDefault();
  const link = document.querySelector("#link").value;
  const name = document.querySelector("#name").value;
  // 非空判断，避免存入空数据
  if(!link || !name) return;
  links["fav"].list.push({ url: link, name: name });
  // 序列化后存入localStorage
  localStorage.setItem("links", JSON.stringify(links));
  // 新增后调用渲染函数更新页面
  renderFavList();
  // 清空输入框方便下次输入
  document.querySelector("#link").value = '';
  document.querySelector("#name").value = '';
});

3. 新增页面渲染函数 #

单独封装渲染函数，初始化和新增数据后都调用，把最新的fav列表渲染到页面上：
首先在HTML中加一个用来展示收藏列表的容器：

<form name="form1" action="">
  <input type="text" name="link" id="link" />
  <input type="text" name="name" id="name" />
  <button id="click">click</button>
</form>
<!-- 新增收藏列表展示容器 -->
<div id="favList"></div>

然后编写对应的渲染逻辑：

function renderFavList() {
  const favListDom = document.querySelector('#favList');
  // 清空之前的内容再重新渲染
  favListDom.innerHTML = '';
  // 遍历fav的list生成dom
  links.fav.list.forEach(item => {
    const a = document.createElement('a');
    a.href = item.url;
    a.textContent = item.name;
    favListDom.appendChild(a);
    favListDom.appendChild(document.createElement('br'));
  })
}
// 页面初始化时先调用一次，渲染已存储的内容
renderFavList();

修改后即可实现新增内容不覆盖历史数据、存储内容自动同步渲染到页面、localStorage实时同步更新的需求。

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