storagefy Svelte Themes

Storagefy

Framework-agnostic adapter system for syncing state libraries (Pinia, Zustand, Redux, Jotai, Svelte, etc.) with browser storage (localStorage, sessionStorage, IndexedDB).

πŸ“¦ storagefy

Framework-agnostic, pluggable storage adapter library for syncing your app state across localStorage, sessionStorage, and IndexedDBβ€”with first-class support for Pinia, React, and Svelte stores.


πŸš€ Features

  • πŸ”Œ Plug-and-play storage: IndexedDB, localStorage, or sessionStorage
  • 🧠 Built-in expiration + encryption support
  • πŸͺ„ Works out-of-the-box with Pinia, Redux/Zustand/Jotai/custom React, and Svelte stores
  • πŸͺŸ Optional multi-tab sync via BroadcastChannel
  • πŸ” Easily switch or upgrade your storage backend without touching app logic

πŸ“¦ Installation

npm install storagefy

πŸ› οΈ Quick Start

1. Initialize a storage adapter

Create your storage instance by configuring the adapter type (IndexedDB, localStorage, or sessionStorage), database name, and optional features like encryption and multi-tab sync.

import { startStoragefy } from 'storagefy';

const adapter = startStoragefy({
  dbName: 'my-app',
  adapter: 'indexedDB', // or 'localStorage', 'sessionStorage'
  encrypt: true,
  channelName: 'my-app-channel',
});

2. Use with a framework adapter

Connect to your preferred framework (Pinia/Vue, React, or Svelte) using the appropriate adapter methods for getting and setting storage values.

import { getPiniaAdapter } from 'storagefy';

const { setInStorage, getFromStorage } = getPiniaAdapter();

🧱 Storage Adapters

startStoragefy(config)

Initializes the storage adapter. If called multiple times, reuses the same adapter unless fresh: true or forceRecreate: true is passed.

Parameters:

  • adapter: 'indexedDB' | 'localStorage' | 'sessionStorage'
    (default: 'indexedDB')

  • dbName: string
    Name of the database (only used for IndexedDB)

  • storeName: string
    Store name (default: 'storagefy_db')

  • encrypt: boolean
    Enable encryption (default: false)

  • channelName: string
    Name for BroadcastChannel to sync across tabs

  • expireCheckInterval: number
    Interval (in ms) to check for expired values

  • description: string
    Description for IndexedDB metadata

  • fresh: boolean
    Always return a new instance (default: false)

  • forceRecreate: boolean
    Force recreate the singleton instance (default: false)

Example:

import { startStoragefy } from 'storagefy';

const adapter = startStoragefy({
  adapter: 'localStorage',
  encrypt: true,
});

πŸ”„ Multi-Tab Sync (Optional)

Enable by configuring channelName during initialization. Automatically synchronizes state updates between:

  • Browser tabs
  • Windows
  • iFrames
const adapter = startStoragefy({
  channelName: 'my-app-sync',
});

Uses the BroadcastChannel API for real-time communication.

πŸ” Basic Encryption (Optional)

Enable by setting encrypt: true in configuration. Provides:

  • Simple encryption layer for stored data
  • Helps obscure values from casual inspection
  • Uses basic client-side encryption mechanism

Important Security Notes:

  • Consider additional server-side protection for sensitive data
  • Mainly prevents accidental exposure of stored values
startStoragefy({
  encrypt: true,
});

πŸ§ͺ Example Use Cases

Common implementation scenarios:

  • Persistent shopping carts
  • Authentication token storage
  • Cross-tab UI preference synchronization
  • Offline application state management
  • User session preservation

πŸ“œ License

MIT License

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes