diff --git a/package.json b/package.json index 2f37f87..4c3c591 100644 --- a/package.json +++ b/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", diff --git a/src/store/actions/index.ts b/src/store/actions/index.ts index e94eaec..24b581e 100644 --- a/src/store/actions/index.ts +++ b/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)); }, diff --git a/src/utils/db.ts b/src/utils/db.ts new file mode 100644 index 0000000..8d329a4 --- /dev/null +++ b/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) { + // +} diff --git a/src/utils/index.ts b/src/utils/index.ts index 2e19794..87e3a88 100644 --- a/src/utils/index.ts +++ b/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); diff --git a/yarn.lock b/yarn.lock index 4401b01..9d3bb2e 100644 --- a/yarn.lock +++ b/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"