如何用JavaScript实现页面刷新后保留购物清单数据？

嘿，太懂这种刷新页面就前功尽弃的挫败感了——谁也不想每次打开购物清单都要重新输入一遍想买的东西对吧？你的核心问题是当前数据只存在浏览器的临时内存里，刷新页面后内存就被清空了。要解决这个问题，我们可以用浏览器自带的localStorage来持久化存储数据，它能把数据存在用户的本地设备里，除非主动删除，否则会一直保留。

下面是具体的优化思路和代码修改方案，直接套进你的旧代码里就行：

1. 新增数据持久化的工具函数 #

首先添加两个工具函数，负责把数据存到localStorage和从里面读取：

// 保存购物清单到localStorage
function saveShoppingList(list) {
  // localStorage只能存字符串，所以用JSON.stringify转成字符串
  localStorage.setItem('shoppingList', JSON.stringify(list));
}

// 从localStorage加载购物清单
function loadShoppingList() {
  const savedData = localStorage.getItem('shoppingList');
  // 如果有保存的数据就转成数组，没有就返回空数组
  return savedData ? JSON.parse(savedData) : [];
}

2. 页面初始化时加载保存的数据 #

在页面刚加载的时候，先从localStorage读取之前保存的清单，再渲染到页面上：

// 初始化购物清单数组，优先用本地保存的数据
let shoppingList = loadShoppingList();
// 调用你原来的渲染函数，把列表显示出来
renderShoppingList();

3. 修改操作函数，同步更新本地存储 #

不管是添加商品、标记已购买还是删除商品，操作完成后都要把更新后的数组保存到localStorage里：

添加商品时： #

function addItem(itemText) {
  // 给每个商品加个唯一ID（用时间戳就行），方便后续修改/删除
  const newItem = {
    id: Date.now(),
    text: itemText,
    isPurchased: false
  };
  shoppingList.push(newItem);
  saveShoppingList(shoppingList); // 同步保存到本地
  renderShoppingList(); // 重新渲染页面
}

标记商品为已购买时： #

function togglePurchased(itemId) {
  // 找到对应ID的商品，切换它的已购买状态
  shoppingList = shoppingList.map(item => {
    if (item.id === itemId) {
      return {...item, isPurchased: !item.isPurchased};
    }
    return item;
  });
  saveShoppingList(shoppingList); // 同步保存
  renderShoppingList();
}

删除商品时： #

function deleteItem(itemId) {
  // 过滤掉要删除的商品
  shoppingList = shoppingList.filter(item => item.id !== itemId);
  saveShoppingList(shoppingList); // 同步保存
  renderShoppingList();
}

一些注意事项 #

• localStorage的存储大小有限（大概5MB），对于购物清单这种轻量数据完全够用；
• 数据存在用户的本地设备上，换浏览器或设备就看不到了，如果需要跨设备同步就得配合后端接口，但这个方案足够解决刷新丢数据的问题；
• 确保你的商品对象有唯一标识（比如上面的id），这样修改和删除操作才能精准定位到对应的商品。

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