localStorage Plugin

npm install @legendapp/state

import { synced } from '@legendapp/state/sync'
import { ObservablePersistLocalStorage } from '@legendapp/state/persist-plugins/local-storage'

const user$ = synced({
  get: () => fetch('/api/user').then(r => r.json()),
  persist: {
    name: 'user',
    plugin: ObservablePersistLocalStorage
  }
})

import { ObservablePersistLocalStorage } from '@legendapp/state/persist-plugins/local-storage'

const data$ = synced({
  persist: {
    name: 'myData',
    plugin: ObservablePersistLocalStorage
  }
})

import { ObservablePersistSessionStorage } from '@legendapp/state/persist-plugins/local-storage'

const tempData$ = synced({
  persist: {
    name: 'tempData',
    plugin: ObservablePersistSessionStorage
  }
})

import { configureObservableSync } from '@legendapp/state/sync'
import { ObservablePersistLocalStorage } from '@legendapp/state/persist-plugins/local-storage'

configureObservableSync({
  persist: {
    plugin: ObservablePersistLocalStorage
  }
})

// Now all synced observables use localStorage by default
const data$ = synced({
  persist: { name: 'data' }  // Uses localStorage
})

getTable(table: string, init: any): any

set(table: string, changes: Change[]): void

getMetadata(table: string): PersistMetadata

setMetadata(table: string, metadata: PersistMetadata): void

deleteTable(table: string): void

deleteMetadata(table: string): void

import { synced } from '@legendapp/state/sync'
import { ObservablePersistLocalStorage } from '@legendapp/state/persist-plugins/local-storage'

const settings$ = synced({
  initial: {
    theme: 'light',
    notifications: true
  },
  persist: {
    name: 'app-settings',
    plugin: ObservablePersistLocalStorage
  }
})

// Data is automatically persisted on changes
settings$.theme.set('dark')

// Data is automatically loaded on page refresh
console.log(settings$.theme.get())  // 'dark'

const user$ = synced({
  get: () => fetch('/api/user').then(r => r.json()),
  set: ({ value }) => fetch('/api/user', {
    method: 'PUT',
    body: JSON.stringify(value)
  }),
  persist: {
    name: 'user',
    plugin: ObservablePersistLocalStorage
  }
})

// 1. Loads from localStorage immediately (fast)
// 2. Syncs with server in background
// 3. Saves to both localStorage and server on changes

import { ObservablePersistSessionStorage } from '@legendapp/state/persist-plugins/local-storage'

// Shopping cart cleared when tab closes
const cart$ = synced({
  initial: { items: [] },
  persist: {
    name: 'shopping-cart',
    plugin: ObservablePersistSessionStorage
  }
})

const user$ = synced({
  persist: {
    name: 'user',  // Stored at key 'user'
    plugin: ObservablePersistLocalStorage
  }
})

const settings$ = synced({
  persist: {
    name: 'settings',  // Stored at key 'settings'
    plugin: ObservablePersistLocalStorage
  }
})

// Stored separately in localStorage:
// localStorage.getItem('user') -> user data
// localStorage.getItem('settings') -> settings data

const data$ = synced({
  persist: {
    name: 'data',
    plugin: ObservablePersistLocalStorage,
    transform: {
      // Dates are converted to ISO strings for storage
      save: (value) => ({
        ...value,
        createdAt: value.createdAt.toISOString()
      }),
      // ISO strings converted back to Dates when loaded
      load: (value) => ({
        ...value,
        createdAt: new Date(value.createdAt)
      })
    }
  }
})

import { syncState } from '@legendapp/state/sync'

const data$ = synced({
  persist: {
    name: 'data',
    plugin: ObservablePersistLocalStorage
  }
})

// Clear persisted data
const state = syncState(data$)
await state.resetPersistence()

// localStorage.getItem('data') -> null

const user$ = synced({
  initial: { name: 'John', age: 30 },
  persist: {
    name: 'user',
    plugin: ObservablePersistLocalStorage
  }
})

// localStorage contents:
// key: 'user'
// value: '{"name":"John","age":30}'

// Metadata stored separately:
// key: 'user__m'
// value: '{"lastSync":1699564800000,"pending":{}}'

try {
  const largeData$ = synced({
    persist: {
      name: 'largeData',
      plugin: ObservablePersistLocalStorage
    }
  })
  
  // May throw QuotaExceededError
  largeData$.set(veryLargeObject)
} catch (error) {
  if (error.name === 'QuotaExceededError') {
    console.error('localStorage quota exceeded')
    // Consider using IndexedDB for large data
  }
}

// Safe to use in SSR
const data$ = synced({
  persist: {
    name: 'data',
    plugin: ObservablePersistLocalStorage
  }
})

// On server: no-op (doesn't crash)
// On client: uses localStorage

// In Jest/Vitest tests
import { ObservablePersistLocalStorage } from '@legendapp/state/persist-plugins/local-storage'

test('persists data', () => {
  const data$ = synced({
    initial: { count: 0 },
    persist: {
      name: 'test-data',
      plugin: ObservablePersistLocalStorage
    }
  })
  
  data$.count.set(5)
  // Uses globalThis._testlocalStorage in tests
})