[Fix][Web] Resolve the issue of "Exceeding storage quota" when too ma…

…ny job tabs are open (#3738)

Co-authored-by: luoshangjie <[email protected]>

dinky-web/package.json

@@ -61,6 +61,7 @@
     "echarts-for-react": "^3.0.2",
     "jquery": "^3.7.1",
     "js-cookie": "^3.0.5",
+    "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "million": "^3.1.1",
     "moment": "^2.30.1",
@@ -93,9 +94,9 @@
     "@types/classnames": "^2.3.1",
     "@types/express": "^4.17.21",
     "@types/history": "^5.0.0",
+    "@types/js-cookie": "^3.0.5",
     "@types/lodash": "^4.17.5",
     "@types/react": "^18.2.39",
-    "@types/js-cookie": "^3.0.5",
     "@types/react-dom": "^18.2.17",
     "@types/react-grid-layout": "^1.3.5",
     "@types/react-helmet": "^6.1.9",

dinky-web/src/app.tsx

@@ -30,13 +30,13 @@ import { history } from '@umijs/max';
 import { JSX } from 'react';
 import { Reducer, StoreEnhancer } from 'redux';
 import { persistReducer, persistStore } from 'redux-persist';
-import storage from 'redux-persist/lib/storage';
 import { Navigate } from 'umi';
 import { default as defaultSettings, default as Settings } from '../config/defaultSettings';
 import { FullScreenProvider } from './hooks/useEditor';
 import { errorConfig } from './requestErrorConfig';
 import { getDataByParamsReturnResult } from './services/BusinessCrud';
 import { API } from './services/data';
+import localforage from 'localforage';
 
 // const isDev = process.env.NODE_ENV === "development";
 const loginPath = API_CONSTANTS.LOGIN_PATH;
@@ -191,7 +191,7 @@ export const request = {
 // 这个是redux-persist 的配置
 const persistConfig = {
   key: 'root', // 自动框架生产的根目录id 是root。不变
-  storage // 这个是选择用什么存储，session 还是 storage
+  storage: localforage // 这个是选择用什么存储，session 还是 storage
 };
 
 const persistEnhancer: StoreEnhancer = (next) => (reducer: Reducer<any, any>) => {

dinky-web/src/components/RightContent/AvatarDropdown.tsx

@@ -45,6 +45,7 @@ import { ItemType } from 'rc-menu/es/interface';
 import type { MenuInfo } from 'rc-menu/lib/interface';
 import { useCallback, useState } from 'react';
 import HeaderDropdown from '../HeaderDropdown';
+import localforage from 'localforage';
 
 export const loginOut = async () => {
   await outLogin();
@@ -245,7 +246,7 @@ const AvatarDropdown = () => {
       icon: <ClearOutlined />,
       label: l('menu.account.clearPageCache'),
       onClick: () => {
-        window.localStorage.removeItem('persist:root');
+        localforage.removeItem('persist:root');
         window.location.reload();
       }
     },