<p>我正在尝试保存愿望单切换按钮的背景颜色，以便当用户跨页面时，按钮的颜色保持为“黑色”，以向用户显示他们已经将该物品保存到愿望单中。</p> <pre class="brush:php;toolbar:false;">const Item = (props) =&gt; { const dispatch = useDispatch(); const [background, setBackground] = useState(false); function addToCartHandler(product) { dispatch(addToCart(product)); } function toggleWishlistHandler(product) { dispatch(toggleItem(product)); setBackground((current) =&gt; !current); } return ( &lt;div&gt; &lt;li className={classes.item}&gt; &lt;img src={props.img} alt=&quot;Item&quot; className={classes.image} /&gt; &lt;div className={classes.description}&gt; &lt;p className={classes.title}&gt;{props.title}&lt;/p&gt; &lt;p className={classes.price}&gt;£{props.price}.00&lt;/p&gt; &lt;/div&gt; &lt;div className={classes.actions}&gt; &lt;div className={`${classes.addWishlist} ${classes.icon}`} onClick={() =&gt; toggleWishlistHandler(props.product)} style={{ backgroundColor: background ? &quot;black&quot; : &quot;orange&quot;, }} &gt; &lt;i className=&quot;fa-solid fa-heart&quot;&gt;&lt;/i&gt; &lt;/div&gt; &lt;div className={`${classes.addCart} ${classes.icon}`} onClick={() =&gt; addToCartHandler(props.product)} &gt; &lt;i className=&quot;fa-solid fa-bag-shopping&quot;&gt;&lt;/i&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;/div&gt; ); }; export default Item;</pre>

// 检查是否设置为黑色
  const [background, setBackground] = useState(localStorage.getItem('wishlistBackground') === 'black');


// 每当背景颜色发生变化时，将其保存到本地存储中
  useEffect(() => {
    localStorage.setItem('wishlistBackground', background ? 'black' : 'orange');
  }, [background]);