Svelte Store Adapter

Storagefy's Svelte adapter provides seamless integration between Svelte's reactive stores and your choice of persistent storage backend. This adapter works with Svelte's standard store contract, allowing you to easily persist and synchronize writable stores across page reloads and browser sessions.

1. Basic Usage

The Svelte adapter works with Svelte's built-in stores, enabling straightforward state persistence with minimal configuration:

        
import { writable } from 'svelte/store';
import { startStoragefy, getSvelteAdapter } from "storagefy";

// Initialize the storage backend
startStoragefy({
  dbName: "my-svelte-app",
  adapter: "indexedDB", // or "localStorage" or "sessionStorage"
  encrypt: true,
  channelName: "svelte-sync" // for cross-tab synchronization
});

// Create a Svelte store
const themeStore = writable({ mode: 'light', accent: 'blue' });

// Get the Svelte adapter
const { setInStorage, getFromStorage } = getSvelteAdapter();

// Load existing data first
await getFromStorage(themeStore, "theme-settings");

// Then set up persistence
await setInStorage(themeStore, "theme-settings", {
  timeout: 2592000000, // 30 days expiration
  ignoreKeys: ["tempTheme"],
  syncTabs: true
});
        
      

2. Using the Helper Function

For a more concise approach, use the setSvelteStorage helper function:

        
import { writable } from 'svelte/store';
import { startStoragefy, setSvelteStorage } from "storagefy";

// Initialize storage backend
startStoragefy({
  dbName: "my-svelte-app",
  adapter: "localStorage"
});

// Create a Svelte store
const userPrefs = writable({
  notifications: true,
  darkMode: false
});

// Use the helper function to load and persist in one step
await setSvelteStorage(userPrefs, "user-preferences", {
  timeout: 86400000, // 24 hours
  ignoreKeys: ["tempPrefs"],
  syncTabs: true
});
        
      

3. Test It

4. Advanced Configuration

You can directly instantiate the SvelteAdapter class for more advanced control:

        
import { writable } from 'svelte/store';
import { SvelteAdapter, IndexedDBAdapter } from "storagefy";

// Create storage adapter instance
const storageAdapter = new IndexedDBAdapter({ 
  dbName: "svelte-app",
  encrypt: true
});

// Create Svelte adapter with the storage adapter
const svelteAdapter = new SvelteAdapter(storageAdapter);

// Create a Svelte store
const cartStore = writable({ items: [], total: 0 });

// Hydrate store from storage
await svelteAdapter.getFromStorage(cartStore, "shopping-cart");

// Set up persistence
await svelteAdapter.setInStorage(cartStore, "shopping-cart", {
  ignoreKeys: ["pendingActions"],
  timeout: 3600000 // 1 hour
});
        
      

5. Configuration Options

The setInStorage method accepts the following options:

6. Store Compatibility

The Svelte adapter works with stores that follow Svelte's store contract:

• Writable stores: Full read/write support with subscribe, set, and update methods
• Custom stores: Compatible as long as they implement the subscribe and set methods

        
// Works with standard writable stores
import { writable } from 'svelte/store';
const standardStore = writable({ count: 0 });

// Works with custom stores that implement the store contract
function createCustomStore(initial) {
  const { subscribe, set, update } = writable(initial);
  
  return {
    subscribe,
    set,
    increment: () => update(n => ({ count: n.count + 1 })),
    reset: () => set({ count: 0 })
  };
}

const customStore = createCustomStore({ count: 0 });
await setSvelteStorage(customStore, "counter");
        
      

7. Cross-Tab Synchronization

When syncTabs: true is set, your Svelte stores will automatically stay in sync across browser tabs:

        
// In Tab 1
const sharedStore = writable({ value: 'initial' });
await setSvelteStorage(sharedStore, "shared-data", { syncTabs: true });

// Later in Tab 1
sharedStore.update(state => ({ ...state, value: 'updated' }));

// In Tab 2 (automatically updated)
// sharedStore value will now be { value: 'updated' }
        
      

This feature uses the BroadcastChannel API to synchronize changes across tabs or windows. Make sure to specify a channelName when calling startStoragefy.

8. API Reference

9. Best Practices

• Always call getFromStorage before setInStorage to hydrate your store with existing data
• For simplicity, use the setSvelteStorage helper which handles this sequence automatically
• Use appropriate timeout values based on your data's volatility (longer for preferences, shorter for temporary state)
• Call destroy() on the adapter when you no longer need it to clean up subscriptions
• For larger applications, consider a more structured approach to key naming, such as prefixing with module names
• Be thoughtful about what you persist - don't store large objects unnecessarily