本文介绍如何利用 useEffect 与 localStorage 配合，实现用户切换页面后仍保留心愿单按钮（如“已收藏”状态）的背景色，确保 UI 状态跨会话一致。
本文介绍如何利用 `useeffect` 与 `localstorage` 配合，实现用户切换页面后仍保留心愿单按钮（如“已收藏”状态）的背景色，确保 ui 状态跨会话一致。
在 React 应用中，组件状态（如 useState 管理的 background）默认是瞬时的——页面刷新或路由跳转后即丢失。若需持久化用户交互产生的视觉状态（例如心愿单按钮从橙色变为黑色以表示“已添加”），必须将其同步至客户端存储。localStorage 是最轻量、兼容性最佳的选择，而 useEffect 则是执行副作用（如读写存储）的标准 Hook。
以下是关键实现步骤：
-
初始化状态时从 localStorage 读取
使用 localStorage.getItem() 获取上次保存的值，并转换为布尔值作为初始状态：const [background, setBackground] = useState( localStorage.getItem('wishlistBackground') === 'black' ); -
使用 useEffect 同步状态变更
每当 background 变化时，自动更新 localStorage，确保数据与 UI 严格一致：useEffect(() => { localStorage.setItem('wishlistBackground', background ? 'black' : 'orange'); }, [background]); -
完整整合到组件中（精简示例）
注意：实际项目中建议将逻辑封装为自定义 Hook（如 useLocalStorage），但此处保持清晰可读：import { useState, useEffect } from 'react'; import { useDispatch } from 'react-redux'; const Item = ({ product, img, title, price }) => { const dispatch = useDispatch(); // ✅ 从 localStorage 初始化状态 const [background, setBackground] = useState( localStorage.getItem('wishlistBackground') === 'black' ); // ✅ 副作用：状态变更时持久化 useEffect(() => { localStorage.setItem('wishlistBackground', background ? 'black' : 'orange'); }, [background]); const toggleWishlistHandler = () => { dispatch(toggleItem(product)); setBackground(prev => !prev); }; return ( <li className={classes.item}> {/* ...其他 JSX */} <div className={`${classes.addWishlist} ${classes.icon}`} onClick={toggleWishlistHandler} style={{ backgroundColor: background ? 'black' : 'orange' }} > <i className="fa-solid fa-heart"></i> </div> </li> ); }; export default Item;
⚠️ 注意事项：
- localStorage 只能存储字符串，因此读取时需显式类型转换（如 === 'black'），写入时也应保持字符串格式；
- 若多个商品共用同一键名（如 'wishlistBackground'），会导致状态互相覆盖——生产环境应基于商品 ID 构建唯一键，例如：
localStorage.getItem(\wishlist_${product.id}`)`; - 首次加载时，localStorage 未设置则返回 null，null === 'black' 为 false，安全可靠；
- 如需支持服务端渲染（SSR），需在 useEffect 内部读写（避免直接访问 window.localStorage 导致 hydration mismatch）。
通过这一模式，你不仅实现了按钮颜色的跨页面记忆，更建立了一种可复用的状态持久化范式：初始化读取 → 交互更新 → 副作用同步。这是构建用户友好、状态连贯的现代 Web 应用的基础实践。
