使用indexDB持久缓存

package.json

@@ -16,6 +16,7 @@
     "@turf/turf": "^6.5.0",
     "antd": "^4.16.13",
     "classnames": "^2.3.1",
+    "idb": "^7.0.0",
     "immer": "^9.0.7",
     "less": "^4.1.2",
     "lodash": "^4.17.21",

src/store/actions/index.ts

@@ -1,7 +1,13 @@
 import { IMapEditor } from "@map";
 import { Action } from "redux";
 import { message, Modal } from "antd";
-import { registerHotkey, downloadJSON, openUpload } from "@utils";
+import {
+  registerHotkey,
+  downloadJSON,
+  openUpload,
+  getItem,
+  setItem,
+} from "@utils";
 
 import { getGeoJSON } from "../utils";
 import { OverlayTypes, EventTypes } from "@types";
@@ -12,13 +18,19 @@ import { initState } from "../initState";
 
 export { ActionTypes, StoreAction } from "./StoreAction";
 
+const CacheFileName = "default";
+const AutoCacheInterval = 30000;
+
 export class EditorAction {
   mapEditor: IMapEditor | null = null;
   store: IStore;
+  id: string;
+
   constructor(store: IStore) {
     this.store = store;
     this._bindActions();
     this._registerHotkeys();
+    this.id = CacheFileName;
   }
 
   get mapOptions() {
@@ -42,16 +54,17 @@ export class EditorAction {
     });
   }
 
-  mapReady() {
-    const cached = sessionStorage.getItem("fine-geojson");
+  async mapReady() {
+    const cached = await getItem(this.id);
     if (cached != null) {
       this._openProject(JSON.parse(cached));
     }
 
     setInterval(() => {
       this.saveTemp();
-    }, 10000);
+    }, AutoCacheInterval);
   }
+
   // ---------- public methods -------------
   createRectangle() {
     this.createOverlay(OverlayTypes.Rectangle);
@@ -108,15 +121,12 @@ export class EditorAction {
 
   saveProject() {
     const mapOptions = this._getMapOptions();
-    downloadJSON(mapOptions, "fine.fjd");
+    downloadJSON(mapOptions, "fine.fgd");
   }
 
-  saveTemp() {
-    sessionStorage.setItem(
-      "fine-geojson",
-      JSON.stringify(this._getMapOptions())
-    );
-    console.log("saved!");
+  async saveTemp() {
+    await setItem(this.id, JSON.stringify(this._getMapOptions()));
+    message.success("暂存成功~");
   }
 
   clearOverlays() {
@@ -152,7 +162,7 @@ export class EditorAction {
   }
   openProject() {
     openUpload({
-      accept: ".fjd",
+      accept: ".fgd",
       onReady: (content) => {
         this._openProject(JSON.parse(content));
       },

src/utils/db.ts

@@ -0,0 +1,33 @@
+import { openDB, IDBPDatabase, wrap, unwrap } from "idb";
+
+const DB = "FineGeoJSON";
+const STORE = "cache";
+const VERSION = 1.0;
+
+let db: IDBPDatabase;
+
+init();
+
+async function init() {
+  if (db == null) {
+    db = await openDB(DB, VERSION, {
+      upgrade(db) {
+        db.createObjectStore(STORE);
+      },
+    });
+  }
+}
+
+export async function getItem(key: string) {
+  await init();
+  return await db.get(STORE, key);
+}
+
+export async function setItem(key: string, value: string) {
+  await init();
+  await db.put(STORE, value, key);
+}
+
+export async function deleteItem(key: string) {
+  //
+}

src/utils/index.ts

@@ -5,6 +5,7 @@ export * from "./hotkeys";
 export * from "./download";
 export * from "./upload";
 export * from "./covert";
+export * from "./db";
 
 export function getUID() {
   return uid(12);

yarn.lock

@@ -4077,6 +4077,11 @@ iconv-lite@^0.4.4:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+idb@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmmirror.com/idb/-/idb-7.0.0.tgz#f349b418c128f625961147a7d6b0e4b526fd34ed"
+  integrity sha512-jSx0WOY9Nj+QzP6wX5e7g64jqh8ExtDs/IAuOrOEZCD/h6+0HqyrKsDMfdJc0hqhSvh0LsrwqrkDn+EtjjzSRA==
+
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.npmmirror.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"