Vue组件中Local Storage使用异常问题求助

问题根源 #

1. 对象引用不匹配：Local Storage存储的是JSON序列化后的字符串，读取时会重新解析为新对象，和组件中原对象的引用完全不同，用includes()或===判断会失效，导致无法识别已收藏元素，删除分支根本进不去。
2. 数组更新逻辑错误：添加收藏时直接覆盖整个数组而非追加元素；删除时因判断失效找不到目标元素，自然没有任何效果。

修正后的useLocalStorage组合式函数 #

import { ref, watch } from 'vue'

export function useLocalStorage(key, initialValue) {
  // 读取Local Storage数据并解析为对应类型
  const storedValue = localStorage.getItem(key)
  const value = ref(storedValue ? JSON.parse(storedValue) : initialValue)

  // 监听数据变化，同步到Local Storage
  watch(value, (newVal) => {
    localStorage.setItem(key, JSON.stringify(newVal))
  }, { deep: true }) // 开启深度监听，处理数组/对象内部的变化

  return value
}

组件收藏逻辑修正 #

以下是修复后的组件核心代码，重点调整了收藏判断和状态切换逻辑：

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
      <button @click="toggleFavorite(item)">
        {{ isFavorite(item) ? '取消收藏' : '添加到收藏' }}
      </button>
    </div>
    <h3>已收藏列表</h3>
    <div v-for="fav in favorites" :key="fav.id">{{ fav.name }}</div>
  </div>
</template>

<script setup>
import { useLocalStorage } from './useLocalStorage'

// 模拟业务列表数据
const list = ref([
  { id: 1, name: '示例内容1' },
  { id: 2, name: '示例内容2' }
])

// 初始化收藏列表，优先读取Local Storage数据，无数据则用空数组
const favorites = useLocalStorage('favorites', [])

// 判断元素是否已收藏：通过唯一id匹配，避开对象引用问题
const isFavorite = (item) => {
  return favorites.value.some(fav => fav.id === item.id)
}

// 切换收藏状态
const toggleFavorite = (item) => {
  const targetIndex = favorites.value.findIndex(fav => fav.id === item.id)
  if (targetIndex !== -1) {
    // 已收藏，执行删除操作
    favorites.value.splice(targetIndex, 1)
  } else {
    // 未收藏，执行添加操作（浅拷贝对象，避免原数据修改影响收藏数据）
    favorites.value.push({ ...item })
  }
}
</script>

关键修复点说明 #

• 用唯一标识判断收藏状态：放弃依赖对象引用的includes()，改用some()或findIndex()通过id（或业务中其他唯一字段）匹配元素，彻底解决引用不匹配的问题。
• 正确操作数组：添加收藏用push()追加元素，删除收藏用splice()移除目标元素，避免直接赋值覆盖整个数组。
• 开启深度监听：在watch配置中添加{ deep: true }，确保数组内部元素变化时能同步到Local Storage。
• 对象浅拷贝：添加收藏时对原对象做浅拷贝，防止后续原数据修改影响已存入Local Storage的收藏内容。

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