feat: add indexDB

app/utils/indexDB-storage.ts

@@ -0,0 +1,20 @@
+import { StateStorage } from "zustand/middleware";
+import { get, set, del } from "idb-keyval";
+
+class IndexDBStorage implements StateStorage {
+  constructor() {}
+
+  public async getItem(name: string): Promise<string | null> {
+    return (await get(name)) || localStorage.getItem(name);
+  }
+
+  public async setItem(name: string, value: string): Promise<void> {
+    await set(name, value);
+  }
+
+  public async removeItem(name: string): Promise<void> {
+    await del(name);
+  }
+}
+
+export const indexDBStorage = new IndexDBStorage();

app/utils/store.ts

@@ -1,7 +1,8 @@
 import { create } from "zustand";
-import { combine, persist } from "zustand/middleware";
+import { combine, persist, createJSONStorage } from "zustand/middleware";
 import { Updater } from "../typing";
 import { deepClone } from "./clone";
+import { indexDBStorage } from "@/app/utils/indexDB-storage";
 
 type SecondParam<T> = T extends (
   _f: infer _F,
@@ -31,6 +32,7 @@ export function createPersistStore<T extends object, M>(
   ) => M,
   persistOptions: SecondParam<typeof persist<T & M & MakeUpdater<T>>>,
 ) {
+  persistOptions.storage = createJSONStorage(() => indexDBStorage);
   return create(
     persist(
       combine(

package.json

@@ -28,6 +28,7 @@
     "fuse.js": "^7.0.0",
     "heic2any": "^0.0.4",
     "html-to-image": "^1.11.11",
+    "idb-keyval": "^6.2.1",
     "lodash-es": "^4.17.21",
     "mermaid": "^10.6.1",
     "nanoid": "^5.0.3",

yarn.lock

@@ -3926,6 +3926,11 @@ [email protected]:
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
+idb-keyval@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.npmmirror.com/idb-keyval/-/idb-keyval-6.2.1.tgz#94516d625346d16f56f3b33855da11bfded2db33"
+  integrity sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg==
+
 ignore@^5.2.0:
   version "5.2.4"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"