将样式保存到本地存储

Question

我正在尝试将切换按钮的背景颜色保存到本地存储，以向用户显示活动和非活动状态，以便他们在购物时可以看到其愿望清单中已有的内容。但是当我退出并返回页面时，背景颜色又回到原来的橙色，即使该项目仍在愿望清单中。

const Item = (props) => {
  const dispatch = useDispatch();
  const [background, setBackground] = useState(false);

  function addToCartHandler(product) {
    dispatch(addToCart(product));
  }

  function toggleWishlistHandler(product) {
    dispatch(toggleItem(product));
    setBackground((current) => !current);
  }

  localStorage.setItem("active", "black");
  localStorage.setItem("unactive", "orange");

  return (
    <div>
      <li className={classes.item}>
        <img src={props.img} alt="Item" className={classes.image} />
        <div className={classes.description}>
          <p className={classes.title}>{props.title}</p>
          <p className={classes.price}>£{props.price}.00</p>
        </div>
        <div className={classes.actions}>
          <div
            className={`${classes.addWishlist} ${classes.icon}`}
            onClick={() => toggleWishlistHandler(props.product)}
            style={{
              backgroundColor: background
                ? localStorage.getItem("active")
                : localStorage.getItem("unactive"),
            }}
          >
            <i className="fa-solid fa-heart"></i>
          </div>
          <div
            className={`${classes.addCart} ${classes.icon}`}
            onClick={() => addToCartHandler(props.product)}
          >
            <i className="fa-solid fa-bag-shopping"></i>
          </div>
        </div>
      </li>
    </div>
  );
};

我想知道是否有办法在我的createslice函数中解决这个问题：

const initialState = {
  wishlistItems: localStorage.getItem("wishlistItems")
    ? JSON.parse(localStorage.getItem("wishlistItems"))
    : [],
  wishlistTotalQuantity: 0,
};

const wishlistSlice = createSlice({
  name: "wishlist",
  initialState,
  reducers: {
    toggleItem(state, action) {
      const itemIndex = state.wishlistItems.findIndex(
        (item) => item.id === action.payload.id
      );

      if (itemIndex >= 0) {
        state.wishlistItems.splice(itemIndex, 1);
      } else {
        const tempProd = { ...action.payload, wishlistQuantity: 1 };
        state.wishlistItems.push(tempProd);
      }

      localStorage.setItem(
        "wishlistItems",
        JSON.stringify(state.wishlistItems)
      );
    },
    deleteItem(state, action) {
      const itemIndex = state.wishlistItems.findIndex(
        (item) => item.id === action.payload.id
      );

      state.wishlistItems.splice(itemIndex, 1);
      // console.log(action.payload);

      localStorage.setItem(
        "wishlistItems",
        JSON.stringify(state.wishlistItems)
      );
    },
  },
});

export const { toggleItem, deleteItem } = wishlistSlice.actions;

export default wishlistSlice.reducer;