Persisting data storage is implemented using zustand middleware persist

src/store/settingStore.ts

@@ -1,6 +1,5 @@
 import { create } from 'zustand';
-
-import { getItem, removeItem, setItem } from '@/utils/storage';
+import { persist, createJSONStorage } from 'zustand/middleware';
 
 import { StorageEnum, ThemeColorPresets, ThemeLayout, ThemeMode } from '#/enum';
 
@@ -21,25 +20,33 @@ type SettingStore = {
   };
 };
 
-const useSettingStore = create<SettingStore>((set) => ({
-  settings: getItem<SettingsType>(StorageEnum.Settings) || {
-    themeColorPresets: ThemeColorPresets.Default,
-    themeMode: ThemeMode.Light,
-    themeLayout: ThemeLayout.Vertical,
-    themeStretch: false,
-    breadCrumb: true,
-    multiTab: true,
-  },
-  actions: {
-    setSettings: (settings) => {
-      set({ settings });
-      setItem(StorageEnum.Settings, settings);
-    },
-    clearSettings() {
-      removeItem(StorageEnum.Settings);
+const useSettingStore = create<SettingStore>()(
+  persist(
+    (set) => ({
+      settings: {
+        themeColorPresets: ThemeColorPresets.Default,
+        themeMode: ThemeMode.Light,
+        themeLayout: ThemeLayout.Vertical,
+        themeStretch: false,
+        breadCrumb: true,
+        multiTab: true,
+      },
+      actions: {
+        setSettings: (settings) => {
+          set({ settings });
+        },
+        clearSettings() {
+          useSettingStore.persist.clearStorage();
+        },
+      },
+    }),
+    {
+      name: StorageEnum.Settings, // name of the item in the storage (must be unique)
+      storage: createJSONStorage(() => localStorage), // (optional) by default, 'localStorage' is used
+      partialize: (state) => ({ settings: state.settings }),
     },
-  },
-}));
+  ),
+);
 
 export const useSettings = () => useSettingStore((state) => state.settings);
 export const useSettingActions = () => useSettingStore((state) => state.actions);

src/store/userStore.ts

@@ -2,9 +2,9 @@ import { useMutation } from '@tanstack/react-query';
 import { App } from 'antd';
 import { useNavigate } from 'react-router-dom';
 import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
 
 import userService, { SignInReq } from '@/api/services/userService';
-import { getItem, removeItem, setItem } from '@/utils/storage';
 
 import { UserInfo, UserToken } from '#/entity';
 import { StorageEnum } from '#/enum';
@@ -22,25 +22,33 @@ type UserStore = {
   };
 };
 
-const useUserStore = create<UserStore>((set) => ({
-  userInfo: getItem<UserInfo>(StorageEnum.User) || {},
-  userToken: getItem<UserToken>(StorageEnum.Token) || {},
-  actions: {
-    setUserInfo: (userInfo) => {
-      set({ userInfo });
-      setItem(StorageEnum.User, userInfo);
-    },
-    setUserToken: (userToken) => {
-      set({ userToken });
-      setItem(StorageEnum.Token, userToken);
-    },
-    clearUserInfoAndToken() {
-      set({ userInfo: {}, userToken: {} });
-      removeItem(StorageEnum.User);
-      removeItem(StorageEnum.Token);
+const useUserStore = create<UserStore>()(
+  persist(
+    (set) => ({
+      userInfo: {},
+      userToken: {},
+      actions: {
+        setUserInfo: (userInfo) => {
+          set({ userInfo });
+        },
+        setUserToken: (userToken) => {
+          set({ userToken });
+        },
+        clearUserInfoAndToken() {
+          set({ userInfo: {}, userToken: {} });
+        },
+      },
+    }),
+    {
+      name: 'userStore', // name of the item in the storage (must be unique)
+      storage: createJSONStorage(() => localStorage), // (optional) by default, 'localStorage' is used
+      partialize: (state) => ({
+        [StorageEnum.User]: state.userInfo,
+        [StorageEnum.Token]: state.userToken,
+      }),
     },
-  },
-}));
+  ),
+);
 
 export const useUserInfo = () => useUserStore((state) => state.userInfo);
 export const useUserToken = () => useUserStore((state) => state.userToken);