How can I use zustand persist with indexeddb?

[CherphAlt]

Indexeddb can store more data than localstorage and other types of storage ? How can I use it with zustand?
I saw that it can be used with indexeddb in the persist guide but there was no example

[dai-shi]

I think someone did persist+indexedeb before (but maybe with old options).
Hope someone can help on this.

[JacobWeisenburger]

feel free to use this template:
Zustand custom persist storage template

If you found my answer satisfactory, please consider supporting me. Even a small amount is greatly appreciated. Thanks friend! 🙏
https://github.com/sponsors/JacobWeisenburger

[fredericrous]

From the docs, the recommended way to use indexeddb is as follow

import { create } from 'zustand'
import { persist, createJSONStorage, StateStorage } from 'zustand/middleware'
import { get, set, del } from 'idb-keyval' // can use anything: IndexedDB, Ionic Storage, etc.

// Custom storage object
const storage: StateStorage = {
  getItem: async (name: string): Promise<string | null> => {
    console.log(name, 'has been retrieved')
    return (await get(name)) || null
  },
  setItem: async (name: string, value: string): Promise<void> => {
    console.log(name, 'with value', value, 'has been saved')
    await set(name, value)
  },
  removeItem: async (name: string): Promise<void> => {
    console.log(name, 'has been deleted')
    await del(name)
  },
}

export const useBoundStore = create(
  persist(
    (set, get) => ({
      bears: 0,
      addABear: () => set({ bears: get().bears + 1 }),
    }),
    {
      name: 'food-storage', // unique name
      storage: createJSONStorage(() => storage),
    },
  ),
)

https://docs.pmnd.rs/zustand/integrations/persisting-store-data#how-can-i-use-a-custom-storage-engine

[KingXP-Pythoner]

From the docs, the recommended way to use indexeddb is as follow

import { create } from 'zustand'
import { persist, createJSONStorage, StateStorage } from 'zustand/middleware'
import { get, set, del } from 'idb-keyval' // can use anything: IndexedDB, Ionic Storage, etc.

// Custom storage object
const storage: StateStorage = {
  getItem: async (name: string): Promise<string | null> => {
    console.log(name, 'has been retrieved')
    return (await get(name)) || null
  },
  setItem: async (name: string, value: string): Promise<void> => {
    console.log(name, 'with value', value, 'has been saved')
    await set(name, value)
  },
  removeItem: async (name: string): Promise<void> => {
    console.log(name, 'has been deleted')
    await del(name)
  },
}

export const useBoundStore = create(
  persist(
    (set, get) => ({
      bears: 0,
      addABear: () => set({ bears: get().bears + 1 }),
    }),
    {
      name: 'food-storage', // unique name
      storage: createJSONStorage(() => storage),
    },
  ),
)

https://docs.pmnd.rs/zustand/integrations/persisting-store-data#how-can-i-use-a-custom-storage-engine

I attempted to follow your answer and also referenced the docs in my Nextjs 14 stack project where I use Dexie.js instead of idb-keyval. However, im unable to rehydrate the store. I always get the warning that it couldn't find the storage.

[fredericrous]

with Remix I insure indexeddb is opened by putting in my clientLoader a code like this

  const dbExists = await new Promise(resolve => {
    const request = indexedDB.open('app-storage')
    request.onsuccess = event => {
      resolve(true)
    }
    request.onerror = event => {
      resolve(false)
    }
  })
  const apps = dbExists ? selectApps(useAppsStore.getState()) : []

[KingXP-Pythoner]

Literally after you sent your reply, I realized I initialized my custom storage below the useStore and used createJSONStorage. For some reason, it didn't throw an error regarding using the object before initialization. Can't believe I made such a noob mistake. But thank you for your reply. It triggered my brain to realize the mistake haha.

[learnuidev]

Here is how I use index db and zustand:

import { create, StateCreator } from "zustand";
import { persist, createJSONStorage, StateStorage } from "zustand/middleware";
import { get, set, del } from "idb-keyval"; // can use anything: IndexedDB, Ionic Storage, etc.

// Custom storage object
export const indexDBStorage: StateStorage = {
  getItem: async (name: string): Promise<string | null> => {
    console.log(name, "has been retrieved");
    return (await get(name)) || null;
  },
  setItem: async (name: string, value: string): Promise<void> => {
    console.log(name, "with value", value, "has been saved");
    await set(name, value);
  },
  removeItem: async (name: string): Promise<void> => {
    console.log(name, "has been deleted");
    await del(name);
  },
};

export const createIndexDBStore = <T extends object>({
  name,
  handler,
}: {
  name: string;
  handler: StateCreator<T>;
}) =>
  create(
    persist(handler, {
      name, // name of the item in the storage (must be unique)
      storage: createJSONStorage(() => indexDBStorage), // (optional) by default, 'localStorage' is used
    })
  );

// Usage
export const useRepeatHistoryStore = createIndexDBStore({
  name: "mandarino/repeat-history",
  handler: (set: any, get: any) => ({
    history: [],
    setHistory: (event: any) => set({ history: get().history.concat(event) }),
    clearHistory: (event: any) => set({ history: [] }),
  }),
});