Persistence & Sync

stroid includes built-in persistence and cross-tab synchronization — no middleware or plugins required. Add a single config option and your state survives page refreshes and stays in sync across tabs.

Warning

Examples reflect the current API: stores are named (createStore('name', state, options)) and mutations use setStore.

Basic Persistence

settings-store.ts

import { createStore } from 'stroid'

createStore(
  'settings',
  {
    theme: 'dark' as 'light' | 'dark',
    fontSize: 14,
    sidebarOpen: true,
  },
  {
    persist: { key: 'app-settings', driver: localStorage },
  }
)

Persist Options

Option	Type	Description
key	string	The storage key. Must be unique per store.
driver	Storage-like	Object with getItem/setItem/removeItem (e.g., localStorage).
serialize/deserialize	(v)=>string / (str)=>any	Override JSON for custom persistence.
encrypt/decrypt	(str)=>string	Optional transforms applied before/after storage.

Selective Persistence

Want to whitelist/blacklist fields? Provide custom serialize / deserialize functions and filter keys inside them.

Note

Schema version and migrations live at the top level of StoreOptions, not inside persist.

Cross-Tab Sync

Enable sync: true to automatically synchronize state across browser tabs using the BroadcastChannel API:

sync.ts

import { createStore, setStore } from 'stroid'

createStore(
  'cart',
  { items: [] as CartItem[] },
  {
    persist: { key: 'cart', driver: localStorage },
    sync: true, // Changes in one tab appear in all tabs
  }
)

export const addItem = (item: CartItem) =>
  setStore('cart', (d) => {
    d.items.push(item)
  })

Note

Tab sync uses BroadcastChannel. If it is unavailable, a warning is logged and sync is skipped.