From 971915948b852be27940d232b11b510b286b4381 Mon Sep 17 00:00:00 2001
From: Soybean <honghuangdc@gmail.com>
Date: Thu, 17 Nov 2022 01:47:06 +0800
Subject: [PATCH] =?UTF-8?q?refactor(projects):=20new=20storage=20system=20?=
 =?UTF-8?q?[=E6=96=B0=E7=9A=84=E6=9C=AC=E5=9C=B0=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=AD=98=E5=82=A8=E7=B3=BB=E7=BB=9F]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/AppLoading.vue |  5 +-
 src/enum/common.ts                   | 16 ------
 src/router/guard/dynamic.ts          |  4 +-
 src/router/guard/permission.ts       |  4 +-
 src/service/request/helpers.ts       |  9 ++--
 src/service/request/instance.ts      |  4 +-
 src/store/modules/auth/helpers.ts    | 25 +++++++++
 src/store/modules/auth/index.ts      |  9 ++--
 src/store/modules/route/index.ts     | 12 +++--
 src/store/modules/tab/helpers.ts     | 12 ++---
 src/store/modules/tab/index.ts       |  6 +--
 src/store/modules/theme/helpers.ts   | 22 ++------
 src/store/modules/theme/index.ts     |  7 +--
 src/store/subscribe/theme.ts         |  4 +-
 src/typings/storage.d.ts             | 22 ++++++++
 src/utils/auth/index.ts              |  1 -
 src/utils/auth/user.ts               | 60 ---------------------
 src/utils/common/index.ts            |  2 -
 src/utils/common/object.ts           |  4 --
 src/utils/common/theme.ts            | 16 ------
 src/utils/index.ts                   |  1 -
 src/utils/storage/local.ts           | 78 ++++++++++++++++------------
 src/utils/storage/session.ts         | 34 ++++++++++++
 23 files changed, 166 insertions(+), 191 deletions(-)
 create mode 100644 src/store/modules/auth/helpers.ts
 create mode 100644 src/typings/storage.d.ts
 delete mode 100644 src/utils/auth/index.ts
 delete mode 100644 src/utils/auth/user.ts
 delete mode 100644 src/utils/common/object.ts
 delete mode 100644 src/utils/common/theme.ts

diff --git a/src/components/common/AppLoading.vue b/src/components/common/AppLoading.vue
index 836dcb79..1d2bab3b 100644
--- a/src/components/common/AppLoading.vue
+++ b/src/components/common/AppLoading.vue
@@ -16,9 +16,8 @@
 </template>
 
 <script setup lang="ts">
-import { EnumStorageKey } from '@/enum';
 import { useAppInfo } from '@/composables';
-import { getLocal } from '@/utils';
+import { localStg } from '@/utils';
 
 const { title } = useAppInfo();
 
@@ -31,7 +30,7 @@ const lodingClasses = [
 
 function addThemeColorCssVars() {
   const defaultColor = '#1890ff';
-  const themeColor = getLocal(EnumStorageKey['theme-color']) || defaultColor;
+  const themeColor = localStg.get('themeColor') || defaultColor;
   const cssVars = `--primary-color: ${themeColor}`;
   document.documentElement.style.cssText = cssVars;
 }
diff --git a/src/enum/common.ts b/src/enum/common.ts
index 598ee9c9..9ed5a063 100644
--- a/src/enum/common.ts
+++ b/src/enum/common.ts
@@ -5,22 +5,6 @@ export enum EnumContentType {
   formData = 'multipart/form-data'
 }
 
-/** 缓存的key */
-export enum EnumStorageKey {
-  /** 主题颜色 */
-  'theme-color' = '__THEME_COLOR__',
-  /** 用户token */
-  'token' = '__TOKEN__',
-  /** 用户刷新token */
-  'refresh-token' = '__REFRESH_TOKEN__',
-  /** 用户信息 */
-  'user-info' = '__USER_INFO__',
-  /** 主题配置 */
-  'theme-settings' = '__THEME_SETTINGS__',
-  /** 多页签路由信息 */
-  'multi-tab-routes' = '__MULTI_TAB_ROUTES__'
-}
-
 /** 数据类型 */
 export enum EnumDataType {
   number = '[object Number]',
diff --git a/src/router/guard/dynamic.ts b/src/router/guard/dynamic.ts
index e57ad2fe..7c238ff6 100644
--- a/src/router/guard/dynamic.ts
+++ b/src/router/guard/dynamic.ts
@@ -1,7 +1,7 @@
 import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router';
 import { routeName } from '@/router';
 import { useRouteStore } from '@/store';
-import { getToken } from '@/utils';
+import { localStg } from '@/utils';
 
 /**
  * 动态路由
@@ -12,7 +12,7 @@ export async function createDynamicRouteGuard(
   next: NavigationGuardNext
 ) {
   const route = useRouteStore();
-  const isLogin = Boolean(getToken());
+  const isLogin = Boolean(localStg.get('token'));
 
   // 初始化权限路由
   if (!route.isInitAuthRoute) {
diff --git a/src/router/guard/permission.ts b/src/router/guard/permission.ts
index e50f3fd9..bc50d597 100644
--- a/src/router/guard/permission.ts
+++ b/src/router/guard/permission.ts
@@ -1,7 +1,7 @@
 import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router';
 import { routeName } from '@/router';
 import { useAuthStore } from '@/store';
-import { exeStrategyActions, getToken } from '@/utils';
+import { exeStrategyActions, localStg } from '@/utils';
 import { createDynamicRouteGuard } from './dynamic';
 
 /** 处理路由页面的权限 */
@@ -22,7 +22,7 @@ export async function createPermissionGuard(
   }
 
   const auth = useAuthStore();
-  const isLogin = Boolean(getToken());
+  const isLogin = Boolean(localStg.get('token'));
   const permissions = to.meta.permissions || [];
   const needLogin = Boolean(to.meta?.requiresAuth) || Boolean(permissions.length);
   const hasPermission = !permissions.length || permissions.includes(auth.userInfo.userRole);
diff --git a/src/service/request/helpers.ts b/src/service/request/helpers.ts
index 356ce06c..49d4fe3c 100644
--- a/src/service/request/helpers.ts
+++ b/src/service/request/helpers.ts
@@ -1,6 +1,6 @@
 import type { AxiosRequestConfig } from 'axios';
 import { useAuthStore } from '@/store';
-import { getRefreshToken, setRefreshToken, setToken } from '@/utils';
+import { localStg } from '@/utils';
 import { fetchUpdateToken } from '../api';
 
 /**
@@ -9,11 +9,12 @@ import { fetchUpdateToken } from '../api';
  */
 export async function handleRefreshToken(axiosConfig: AxiosRequestConfig) {
   const { resetAuthStore } = useAuthStore();
-  const refreshToken = getRefreshToken();
+  const refreshToken = localStg.get('refreshToken') || '';
   const { data } = await fetchUpdateToken(refreshToken);
   if (data) {
-    setToken(data.token);
-    setRefreshToken(data.refreshToken);
+    localStg.set('token', data.token);
+    localStg.set('refreshToken', data.refreshToken);
+
     const config = { ...axiosConfig };
     if (config.headers) {
       config.headers.Authorization = data.token;
diff --git a/src/service/request/instance.ts b/src/service/request/instance.ts
index e0b4a3ba..c4180c9f 100644
--- a/src/service/request/instance.ts
+++ b/src/service/request/instance.ts
@@ -2,7 +2,7 @@ import axios from 'axios';
 import type { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios';
 import { REFRESH_TOKEN_CODE } from '@/config';
 import {
-  getToken,
+  localStg,
   handleAxiosError,
   handleBackendError,
   handleResponseError,
@@ -49,7 +49,7 @@ export default class CustomAxiosInstance {
           const contentType = handleConfig.headers['Content-Type'] as string;
           handleConfig.data = await transformRequestData(handleConfig.data, contentType);
           // 设置token
-          handleConfig.headers.Authorization = getToken();
+          handleConfig.headers.Authorization = localStg.get('token') || '';
         }
         return handleConfig;
       },
diff --git a/src/store/modules/auth/helpers.ts b/src/store/modules/auth/helpers.ts
new file mode 100644
index 00000000..513b5570
--- /dev/null
+++ b/src/store/modules/auth/helpers.ts
@@ -0,0 +1,25 @@
+import { localStg } from '@/utils';
+
+/** 获取token */
+export function getToken() {
+  return localStg.get('token') || '';
+}
+
+/** 获取用户信息 */
+export function getUserInfo() {
+  const emptyInfo: Auth.UserInfo = {
+    userId: '',
+    userName: '',
+    userRole: 'user'
+  };
+  const userInfo: Auth.UserInfo = localStg.get('userInfo') || emptyInfo;
+
+  return userInfo;
+}
+
+/** 去除用户相关缓存 */
+export function clearAuthStorage() {
+  localStg.remove('token');
+  localStg.remove('refreshToken');
+  localStg.remove('userInfo');
+}
diff --git a/src/store/modules/auth/index.ts b/src/store/modules/auth/index.ts
index 6b6f6e17..73464f56 100644
--- a/src/store/modules/auth/index.ts
+++ b/src/store/modules/auth/index.ts
@@ -3,9 +3,10 @@ import { defineStore } from 'pinia';
 import { router } from '@/router';
 import { fetchLogin, fetchUserInfo } from '@/service';
 import { useRouterPush } from '@/composables';
-import { clearAuthStorage, getToken, getUserInfo, setRefreshToken, setToken, setUserInfo } from '@/utils';
+import { localStg } from '@/utils';
 import { useTabStore } from '../tab';
 import { useRouteStore } from '../route';
+import { getToken, getUserInfo, clearAuthStorage } from './helpers';
 
 interface AuthState {
   /** 用户信息 */
@@ -81,14 +82,14 @@ export const useAuthStore = defineStore('auth-store', {
 
       // 先把token存储到缓存中(后面接口的请求头需要token)
       const { token, refreshToken } = backendToken;
-      setToken(token);
-      setRefreshToken(refreshToken);
+      localStg.set('token', token);
+      localStg.set('refreshToken', refreshToken);
 
       // 获取用户信息
       const { data } = await fetchUserInfo();
       if (data) {
         // 成功后把用户信息存储到缓存中
-        setUserInfo(data);
+        localStg.set('userInfo', data);
 
         // 更新状态
         this.userInfo = data;
diff --git a/src/store/modules/route/index.ts b/src/store/modules/route/index.ts
index ca3bc9f6..8151164d 100644
--- a/src/store/modules/route/index.ts
+++ b/src/store/modules/route/index.ts
@@ -2,10 +2,10 @@ import { defineStore } from 'pinia';
 import { ROOT_ROUTE, constantRoutes, router, routes as staticRoutes } from '@/router';
 import { fetchUserRoutes } from '@/service';
 import {
+  localStg,
   filterAuthRoutesByUserPermission,
   getCacheRoutes,
   getConstantRouteNames,
-  getUserInfo,
   transformAuthRouteToVueRoutes,
   transformAuthRouteToVueRoute,
   transformAuthRouteToMenu,
@@ -106,7 +106,12 @@ export const useRouteStore = defineStore('route-store', {
     },
     /** 初始化动态路由 */
     async initDynamicRoute() {
-      const { userId } = getUserInfo();
+      const { userId } = localStg.get('userInfo') || {};
+
+      if (!userId) {
+        throw new Error('userId 不能为空!');
+      }
+
       const { data } = await fetchUserRoutes(userId);
       if (data) {
         this.routeHomeName = data.home;
@@ -123,9 +128,6 @@ export const useRouteStore = defineStore('route-store', {
     /** 初始化权限路由 */
     async initAuthRoute() {
       const { initHomeTab } = useTabStore();
-      const { userId } = getUserInfo();
-
-      if (!userId) return;
 
       const isDynamicRoute = this.authRouteMode === 'dynamic';
       if (isDynamicRoute) {
diff --git a/src/store/modules/tab/helpers.ts b/src/store/modules/tab/helpers.ts
index 019f3580..d5833625 100644
--- a/src/store/modules/tab/helpers.ts
+++ b/src/store/modules/tab/helpers.ts
@@ -1,6 +1,5 @@
 import type { RouteLocationNormalizedLoaded, RouteRecordNormalized } from 'vue-router';
-import { EnumStorageKey } from '@/enum';
-import { getLocal, setLocal } from '@/utils';
+import { localStg } from '@/utils';
 
 /**
  * 根据vue路由获取tab路由
@@ -58,15 +57,10 @@ function hasFullPath(
   return Boolean((route as RouteLocationNormalizedLoaded).fullPath);
 }
 
-/** 缓存多页签数据 */
-export function setTabRoutes(data: App.GlobalTabRoute[]) {
-  setLocal(EnumStorageKey['multi-tab-routes'], data);
-}
-
 /** 获取缓存的多页签数据 */
 export function getTabRoutes() {
   const routes: App.GlobalTabRoute[] = [];
-  const data = getLocal<App.GlobalTabRoute[]>(EnumStorageKey['multi-tab-routes']);
+  const data = localStg.get('multiTabRoutes');
   if (data) {
     const defaultTabRoutes = data.map(item => ({
       ...item,
@@ -82,5 +76,5 @@ export function getTabRoutes() {
 
 /** 清空多页签数据 */
 export function clearTabRoutes() {
-  setTabRoutes([]);
+  localStg.set('multiTabRoutes', []);
 }
diff --git a/src/store/modules/tab/index.ts b/src/store/modules/tab/index.ts
index 5f153b4d..ed3df8f5 100644
--- a/src/store/modules/tab/index.ts
+++ b/src/store/modules/tab/index.ts
@@ -1,6 +1,7 @@
 import type { RouteLocationNormalizedLoaded, Router } from 'vue-router';
 import { defineStore } from 'pinia';
 import { useRouterPush } from '@/composables';
+import { localStg } from '@/utils';
 import { useThemeStore } from '../theme';
 import {
   clearTabRoutes,
@@ -8,8 +9,7 @@ import {
   getIndexInTabRoutesByRouteName,
   getTabRouteByVueRoute,
   getTabRoutes,
-  isInTabRoutes,
-  setTabRoutes
+  isInTabRoutes
 } from './helpers';
 
 interface TabState {
@@ -52,7 +52,7 @@ export const useTabStore = defineStore('tab-store', {
     },
     /** 缓存页签路由数据 */
     cacheTabRoutes() {
-      setTabRoutes(this.tabs);
+      localStg.set('multiTabRoutes', this.tabs);
     },
     /**
      * 设置当前路由对应的页签为激活状态
diff --git a/src/store/modules/theme/helpers.ts b/src/store/modules/theme/helpers.ts
index 1d07b02d..4007440c 100644
--- a/src/store/modules/theme/helpers.ts
+++ b/src/store/modules/theme/helpers.ts
@@ -1,19 +1,18 @@
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { cloneDeep } from 'lodash-es';
 import { themeSetting } from '@/settings';
-import { EnumStorageKey } from '@/enum';
-import { addColorAlpha, getColorPalette, getLocal, getThemeColor, removeLocal, setLocal } from '@/utils';
+import { localStg, addColorAlpha, getColorPalette } from '@/utils';
 
 /** 初始化主题配置 */
 export function initThemeSettings() {
   const isProd = import.meta.env.PROD;
   // 生产环境才缓存主题配置，本地开发实时调整配置更改配置的json
-  const storageSettings = getThemeSettings();
+  const storageSettings = localStg.get('themeSettings');
   if (isProd && storageSettings) {
     return storageSettings;
   }
 
-  const themeColor = getThemeColor() || themeSetting.themeColor;
+  const themeColor = localStg.get('themeColor') || themeSetting.themeColor;
   const info = themeSetting.isCustomizeInfoColor ? themeSetting.otherColor.info : getColorPalette(themeColor, 7);
   const otherColor = { ...themeSetting.otherColor, info };
   const setting = cloneDeep({ ...themeSetting, themeColor, otherColor });
@@ -78,18 +77,3 @@ export function getNaiveThemeOverrides(colors: Record<ColorType, string>): Globa
     }
   };
 }
-
-/** 获取缓存中的主题配置 */
-function getThemeSettings() {
-  return getLocal<Theme.Setting>(EnumStorageKey['theme-settings']);
-}
-
-/** 获取缓存中的主题配置 */
-export function setThemeSettings(settings: Theme.Setting) {
-  return setLocal(EnumStorageKey['theme-settings'], settings);
-}
-
-/** 清除缓存配置 */
-export function clearThemeSettings() {
-  removeLocal(EnumStorageKey['theme-settings']);
-}
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index 7c13f8d5..c693790f 100644
--- a/src/store/modules/theme/index.ts
+++ b/src/store/modules/theme/index.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { darkTheme } from 'naive-ui';
-import { clearThemeSettings, getNaiveThemeOverrides, initThemeSettings, setThemeSettings } from './helpers';
+import { localStg } from '@/utils';
+import { getNaiveThemeOverrides, initThemeSettings } from './helpers';
 
 type ThemeState = Theme.Setting;
 
@@ -24,14 +25,14 @@ export const useThemeStore = defineStore('theme-store', {
   actions: {
     /** 重置theme状态 */
     resetThemeStore() {
-      clearThemeSettings();
+      localStg.remove('themeSettings');
       this.$reset();
     },
     /** 缓存主题配置 */
     cacheThemeSettings() {
       const isProd = import.meta.env.PROD;
       if (isProd) {
-        setThemeSettings(this.$state);
+        localStg.set('themeSettings', this.$state);
       }
     },
     /** 设置暗黑模式 */
diff --git a/src/store/subscribe/theme.ts b/src/store/subscribe/theme.ts
index 92b22c8d..89cb821c 100644
--- a/src/store/subscribe/theme.ts
+++ b/src/store/subscribe/theme.ts
@@ -3,7 +3,7 @@ import { useOsTheme } from 'naive-ui';
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { useElementSize } from '@vueuse/core';
 import { kebabCase } from 'lodash-es';
-import { setThemeColor } from '@/utils';
+import { localStg } from '@/utils';
 import { useThemeStore } from '../modules';
 
 /** 订阅theme store */
@@ -17,7 +17,7 @@ export default function subscribeThemeStore() {
   const stopThemeColor = watch(
     () => theme.themeColor,
     newValue => {
-      setThemeColor(newValue);
+      localStg.set('themeColor', newValue);
     },
     { immediate: true }
   );
diff --git a/src/typings/storage.d.ts b/src/typings/storage.d.ts
new file mode 100644
index 00000000..892a7167
--- /dev/null
+++ b/src/typings/storage.d.ts
@@ -0,0 +1,22 @@
+declare namespace StorageInterface {
+  /** localStorage的存储数据的类型 */
+  interface Session {
+    demoKey: string;
+  }
+
+  /** localStorage的存储数据的类型 */
+  interface Local {
+    /** 主题颜色 */
+    themeColor: string;
+    /** 用户token */
+    token: string;
+    /** 用户刷新token */
+    refreshToken: string;
+    /** 用户信息 */
+    userInfo: Auth.UserInfo;
+    /** 主题配置 */
+    themeSettings: Theme.Setting;
+    /** 多页签路由信息 */
+    multiTabRoutes: App.GlobalTabRoute[];
+  }
+}
diff --git a/src/utils/auth/index.ts b/src/utils/auth/index.ts
deleted file mode 100644
index e5abc856..00000000
--- a/src/utils/auth/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './user';
diff --git a/src/utils/auth/user.ts b/src/utils/auth/user.ts
deleted file mode 100644
index 2be035b6..00000000
--- a/src/utils/auth/user.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { EnumStorageKey } from '@/enum';
-import { getLocal, removeLocal, setLocal } from '../storage';
-
-/** 设置token */
-export function setToken(token: string) {
-  setLocal(EnumStorageKey.token, token);
-}
-
-/** 获取token */
-export function getToken() {
-  return getLocal<string>(EnumStorageKey.token) || '';
-}
-
-/** 去除token */
-export function removeToken() {
-  removeLocal(EnumStorageKey.token);
-}
-
-/** 获取refresh token */
-export function getRefreshToken() {
-  return getLocal<string>(EnumStorageKey['refresh-token']) || '';
-}
-
-/** 设置refresh token */
-export function setRefreshToken(token: string) {
-  setLocal(EnumStorageKey['refresh-token'], token);
-}
-
-/** 去除refresh token */
-export function removeRefreshToken() {
-  removeLocal(EnumStorageKey['refresh-token']);
-}
-
-/** 获取用户信息 */
-export function getUserInfo() {
-  const emptyInfo: Auth.UserInfo = {
-    userId: '',
-    userName: '',
-    userRole: 'user'
-  };
-  const userInfo: Auth.UserInfo = getLocal<Auth.UserInfo>(EnumStorageKey['user-info']) || emptyInfo;
-  return userInfo;
-}
-
-/** 设置用户信息 */
-export function setUserInfo(userInfo: Auth.UserInfo) {
-  setLocal(EnumStorageKey['user-info'], userInfo);
-}
-
-/** 去除用户信息 */
-export function removeUserInfo() {
-  removeLocal(EnumStorageKey['user-info']);
-}
-
-/** 去除用户相关缓存 */
-export function clearAuthStorage() {
-  removeToken();
-  removeRefreshToken();
-  removeUserInfo();
-}
diff --git a/src/utils/common/index.ts b/src/utils/common/index.ts
index 6bf9554d..cc92dea5 100644
--- a/src/utils/common/index.ts
+++ b/src/utils/common/index.ts
@@ -1,6 +1,4 @@
 export * from './typeof';
 export * from './color';
 export * from './number';
-export * from './object';
 export * from './pattern';
-export * from './theme';
diff --git a/src/utils/common/object.ts b/src/utils/common/object.ts
deleted file mode 100644
index 450b6f6f..00000000
--- a/src/utils/common/object.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/** 设置对象数据 */
-export function objectAssign<T extends Record<string, any>>(target: T, source: Partial<T>) {
-  Object.assign(target, source);
-}
diff --git a/src/utils/common/theme.ts b/src/utils/common/theme.ts
deleted file mode 100644
index fe1bd20c..00000000
--- a/src/utils/common/theme.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { EnumStorageKey } from '@/enum';
-
-/**
- * 缓存主题颜色
- * @param color
- */
-export function setThemeColor(color: string) {
-  window.localStorage.setItem(EnumStorageKey['theme-color'], color);
-}
-
-/**
- * 获取缓存的主题颜色
- */
-export function getThemeColor() {
-  return window.localStorage.getItem(EnumStorageKey['theme-color']);
-}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index cc3d8ff7..b75f46d6 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,6 +1,5 @@
 export * from './common';
 export * from './storage';
 export * from './service';
-export * from './auth';
 export * from './router';
 export * from './form';
diff --git a/src/utils/storage/local.ts b/src/utils/storage/local.ts
index 0c2c82d4..114f39f7 100644
--- a/src/utils/storage/local.ts
+++ b/src/utils/storage/local.ts
@@ -1,45 +1,57 @@
 import { decrypto, encrypto } from '../crypto';
-
-interface StorageData {
-  value: unknown;
+interface StorageData<T> {
+  value: T;
   expire: number | null;
 }
 
-/** 默认缓存期限为7天 */
-const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
+function createLocalStorage<T extends StorageInterface.Local = StorageInterface.Local>() {
+  /** 默认缓存期限为7天 */
+  const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
 
-export function setLocal(key: string, value: unknown, expire: number | null = DEFAULT_CACHE_TIME) {
-  const storageData: StorageData = { value, expire: expire !== null ? new Date().getTime() + expire * 1000 : null };
-  const json = encrypto(storageData);
-  window.localStorage.setItem(key, json);
-}
+  function set<K extends keyof T>(key: K, value: T[K], expire: number | null = DEFAULT_CACHE_TIME) {
+    const storageData: StorageData<T[K]> = {
+      value,
+      expire: expire !== null ? new Date().getTime() + expire * 1000 : null
+    };
+    const json = encrypto(storageData);
+    window.localStorage.setItem(key as string, json);
+  }
 
-export function getLocal<T>(key: string) {
-  const json = window.localStorage.getItem(key);
-  if (json) {
-    let storageData: StorageData | null = null;
-    try {
-      storageData = decrypto(json);
-    } catch {
-      // 防止解析失败
-    }
-    if (storageData) {
-      const { value, expire } = storageData;
-      // 在有效期内直接返回
-      if (expire === null || expire >= Date.now()) {
-        return value as T;
+  function get<K extends keyof T>(key: K) {
+    const json = window.localStorage.getItem(key as string);
+    if (json) {
+      let storageData: StorageData<T[K]> | null = null;
+      try {
+        storageData = decrypto(json);
+      } catch {
+        // 防止解析失败
       }
+      if (storageData) {
+        const { value, expire } = storageData;
+        // 在有效期内直接返回
+        if (expire === null || expire >= Date.now()) {
+          return value as T[K];
+        }
+      }
+      remove(key);
+      return null;
     }
-    removeLocal(key);
     return null;
   }
-  return null;
+
+  function remove(key: keyof T) {
+    window.localStorage.removeItem(key as string);
+  }
+  function clear() {
+    window.localStorage.clear();
+  }
+
+  return {
+    set,
+    get,
+    remove,
+    clear
+  };
 }
 
-export function removeLocal(key: string) {
-  window.localStorage.removeItem(key);
-}
-
-export function clearLocal() {
-  window.localStorage.clear();
-}
+export const localStg = createLocalStorage();
diff --git a/src/utils/storage/session.ts b/src/utils/storage/session.ts
index 64c29b9f..b6efe9b9 100644
--- a/src/utils/storage/session.ts
+++ b/src/utils/storage/session.ts
@@ -25,3 +25,37 @@ export function removeSession(key: string) {
 export function clearSession() {
   window.sessionStorage.clear();
 }
+
+function createSessionStorage<T extends StorageInterface.Session = StorageInterface.Session>() {
+  function set<K extends keyof T>(key: K, value: T[K]) {
+    const json = encrypto(value);
+    sessionStorage.setItem(key as string, json);
+  }
+  function get<K extends keyof T>(key: K) {
+    const json = sessionStorage.getItem(key as string);
+    let data: T[K] | null = null;
+    if (json) {
+      try {
+        data = decrypto(json);
+      } catch {
+        // 防止解析失败
+      }
+    }
+    return data;
+  }
+  function remove(key: keyof T) {
+    window.sessionStorage.removeItem(key as string);
+  }
+  function clear() {
+    window.sessionStorage.clear();
+  }
+
+  return {
+    set,
+    get,
+    remove,
+    clear
+  };
+}
+
+export const sessionStg = createSessionStorage();