Vanilla JS收藏功能Bug：本地存储数组删除对象后添加新对象时旧对象重现

核心问题：删除收藏后新增，旧数据复现 #

原因1：内存数组与localStorage未同步 #

你定义的footFavoritesArray = []若仅在页面加载时初始化，且操作（新增/删除）前未从localStorage读取最新状态，或操作后未及时更新内存数组，会导致内存数据与持久化数据脱节。比如删除后虽清空内存数组并把localStorage设为[]，但新增时直接复用了内存中未正确更新的旧数组，导致旧数据被重新存入。

解决方案： #

统一通过localStorage读写状态，避免依赖全局数组长期保存数据：

// 读取最新收藏数据
function getFootFavorites() {
  const stored = localStorage.getItem('footFavorites');
  return stored ? JSON.parse(stored) : [];
}

// 保存收藏数据到localStorage
function saveFootFavorites(array) {
  localStorage.setItem('footFavorites', JSON.stringify(array));
}

// 添加收藏逻辑
function footFavorites(foot) {
  const favorites = getFootFavorites();
  // 避免重复添加（可选）
  const isDuplicate = favorites.some(item => item.valAssign === foot.valAssign);
  if (!isDuplicate) {
    favorites.push(foot);
    saveFootFavorites(favorites);
    feetCard(favorites); // 更新视图
  }
}

// 删除收藏逻辑
function removeFavorites(item) {
  let favorites = getFootFavorites();
  favorites = favorites.filter(fav => fav.valAssign !== item.valAssign);
  saveFootFavorites(favorites);
  feetCard(favorites); // 更新视图
}

原因2：删除操作未彻底更新内存引用 #

如果删除时仅用splice原地修改数组，而非返回新数组，可能导致某些视图逻辑仍引用旧数组的残留数据，新增时旧数据被带回来。

解决方案： #

删除操作使用filter返回新数组，确保所有引用拿到的是最新状态：

function removeFavorites(item) {
  let favorites = getFootFavorites();
  // 返回新数组，而非原地修改
  favorites = favorites.filter(fav => fav.valAssign !== item.valAssign);
  saveFootFavorites(favorites);
  // 若必须用全局数组，重新赋值更新引用
  window.footFavoritesArray = favorites;
  feetCard(favorites);
}

问题：localStorage出现[,...] #

原因： #

这是JSON.stringify处理循环引用对象或**包含不可序列化属性（如函数、Symbol、undefined）**时的截断标记，说明你要存入的foot对象存在无法被JSON完整序列化的内容。

解决方案： #

1. 清理对象结构：确保存入的对象仅包含可序列化属性（字符串、数字、布尔值、普通数组/对象），移除循环引用或不可序列化的属性。
2. 序列化前过滤属性：手动提取需要的属性，避免序列化冗余内容：

function serializeFoot(foot) {
  // 只保留需要的可序列化字段
  return {
    valAssign: foot.valAssign,
    manufacturer: foot.manufacturer,
    name: foot.name
  };
}

// 添加收藏时先处理对象
function footFavorites(foot) {
  const cleanFoot = serializeFoot(foot);
  const favorites = getFootFavorites();
  const isDuplicate = favorites.some(item => item.valAssign === cleanFoot.valAssign);
  if (!isDuplicate) {
    favorites.push(cleanFoot);
    saveFootFavorites(favorites);
    feetCard(favorites);
  }
}

3. 捕获序列化错误：避免因序列化失败导致数据异常：

function saveFootFavorites(array) {
  try {
    const serialized = JSON.stringify(array);
    localStorage.setItem('footFavorites', serialized);
  } catch (e) {
    console.error('收藏数据序列化失败:', e);
  }
}

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