Exports Usage

Storagefy provides a modular export system for maximum flexibility. Whether you're managing state across React, Vue (Pinia), or Svelte — or choosing between localStorage, sessionStorage, or IndexedDB — the exported modules are designed to be highly composable and framework-agnostic.

1. Importing Adapters

You can directly import individual storage and framework adapters for advanced use cases or custom integrations. 

        
import { IndexedDBAdapter } from "storagefy";
import { LocalStorageAdapter } from "storagefy";
import { SessionStorageAdapter } from "storagefy";

import { PiniaAdapter } from "storagefy";
import { ReactAdapter } from "storagefy";
import { SvelteAdapter } from "storagefy";

2. Using startStoragefy

This function initializes and returns a storage adapter instance based on the provided configuration. You can reuse this adapter across frameworks. 

        
import { startStoragefy }  from "storagefy";
const adapter = startStoragefy({
  dbName: "my-app",
  adapter: "indexedDB", // or "localStorage" or "sessionStorage"
  encrypt: true,
  expireCheckInterval: 2000,
  channelName: "storagefy-sync" // sync changes across tabs/windows
  enableSyncTabs: false, // optional, default false - Whether to enable sync automatically on change key value
});

If an adapter is already initialized and forceRecreate is not set to true, the same instance is reused.

The channelName option creates a communication channel across browser tabs using BroadcastChannel, allowing real-time sync of updates in React, Vue (Pinia), or Svelte stores.

3. Retrieving Current Adapter

Once initialized with startStoragefy, you can retrieve the current adapter via: 

        
import { getStorageAdapter } from "storagefy";          
const current = getStorageAdapter();

4. Framework Adapters

React

To use Storagefy with Zustand, Redux, Jotai, or custom React stores: 

          
import { getReactAdapter } from "storagefy";
// startStoragefy() must be called first
const react = getReactAdapter({
  adapterParams: { adapter: "localStorage", dbName: "my-react-app" }
});
    
await getFromStorage(myStore, "user"); // THIS MUST BE CALLED FIRST THAN setInStorage

await setInStorage(myStore, "user", {
  timeout: 3600000,
  ignoreKeys: ["tempId"],
  syncTabs: true
});

Or use the helper:

          
// startStoragefy() must be called first
await setReactStorage(myStore, "settings", {
  timeout: 300000, // expire after 5 minutes
  ignoreKeys: ["_temp", "loading"],
  syncTabs: true
});

Vue (Pinia)

Get a preconfigured Pinia adapter using:

            
// startStoragefy() must be called first
const { setInStorage, getFromStorage } = getPiniaAdapter({
  adapterParams: { adapter: "sessionStorage" }
});
    
await getFromStorage(myStore, "user"); // THIS MUST BE CALLED FIRST THAN setInStorage
await setInStorage(myStore, "user", {
  timeout: 3600000, // 1 hour
  ignoreKeys: ["tempId"],
  syncTabs: true
});

Or use the helper:

          
await setPiniaStorage(myStore, "user", {
  timeout: 3600000,
  ignoreKeys: ["tempId"],
  syncTabs: true
});

Svelte

Integrate Svelte writable or readable stores:

          
// startStoragefy() must be called first
const svelte = getSvelteAdapter({
  adapterParams: { 
    adapter: "indexedDB" 
  }
});
    
await getFromStorage(myStore, "theme"); // THIS MUST BE CALLED FIRST THAN setInStorage
await svelte.setInStorage(myStore, "theme", {
  timeout: 86400000, // 24 hours
  ignoreKeys: ["preview"],
  syncTabs: true
});

Or simply use the shorthand:

          
// startStoragefy() must be called first            
await setSvelteStorage(myStore, "theme", {
  timeout: 86400000,
  ignoreKeys: ["preview"],
  syncTabs: true
});

All set* functions accept the same parameters:

  • store: The store instance you want to persist
  • id: A string key under which to store the data
  • options (optional):
    • timeout: Expiration duration in milliseconds for the stored data
    • ignoreKeys: Array of property keys to exclude from persistence
    • syncTabs: If true, enables cross-tab syncing using the channelName

5. Exported API Summary

  • IndexedDBAdapter, LocalStorageAdapter, SessionStorageAdapter
  • PiniaAdapter, ReactAdapter, SvelteAdapter
  • startStoragefy(config)
  • getStorageAdapter()
  • getPiniaAdapter(), getReactAdapter(), getSvelteAdapter()
  • setPiniaStorage(), setReactStorage(), setSvelteStorage()