注意:您需要一点点 REDUX 工具包知识

有时我们希望某些状态值在刷新浏览器后成为持久事件。例如,特定网络应用的一些设置,如暗模式或购物车中的物品。

对于这些东西,我们可以使用 localstorage。 Localstorage 是浏览器内置内存以保存此类设置。

让我们深入研究这个例子。

假设我们有一个购物车对象,如下所示。

cartItems = {
cartItems: localStorage.getItem('cartItems') ? JSON.parse(localStorage.getItem('cartItems')) : [],
    cartTotalQuantity: 0,
    cartTotalAmount: 0
}

进入全屏模式 退出全屏模式

cartItems :我们声明从键“cartItems”的本地存储中获取项目(如果存在)获取项目或如果购物车为空则返回空数组。

const cartSlice = createSlice({
    name: 'cart',
    initialState,
    reducers: {
        addToCart(state, action) {
            const itemIndex = state.cartItems.findIndex((item) => item.id === action.payload.id);

            if (itemIndex >= 0) {
                state.cartItems[itemIndex].cartQuanity += 1;
                toast.info(`increased ${state.cartItems[itemIndex].name} cart quantity`, {
                    position: 'bottom-left'
                });
            }
            else {
                const tempProd = { ...action.payload, cartQuanity: 1 };
                state.cartItems.push(tempProd);
                toast.success(`${action.payload.name} Added To The Cart`, {
                    position: 'bottom-left'
                });
            }
            localStorage.setItem('cartItems', JSON.stringify(state.cartItems))
        }
    }
})

进入全屏模式 退出全屏模式

🥔