Registry / storage / svelte-local-storage-store

svelte-local-storage-store

library0.6.4jsnpmunverified

A Svelte store that automatically syncs state with localStorage. Current stable version is 0.6.4. The package provides a simple writable store that persists values under a given key, with built-in JSON serialization. It supports Svelte 3 and 4 (requires ^3.48.0 || >4.0.0). Key differentiator: minimal API (one function), no dependencies besides Svelte, TypeScript types included. Note: This package has been renamed to svelte-persisted-store; new development happens there. For new projects, use svelte-persisted-store instead.

storage

npm install svelte-local-storage-store

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · SVELTE-LOCAL-STORA

svelte-local-storage-store

storagejavascriptv0.6.4

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

localStorageStore

✓ import { localStorageStore } from 'svelte-local-storage-store'

✗ import localStorageStore from 'svelte-local-storage-store'

This is a named export, not a default export. Common mistake: using default import.

localStorageStore

✓ import { localStorageStore } from 'svelte-persisted-store'

✗ import { localStorageStore } from 'svelte-local-storage-store'

Since rename, svelte-persisted-store is the correct package. The old package still works but is deprecated.

localStorageStore

✓ const { localStorageStore } = require('svelte-local-storage-store')

✗ const localStorageStore = require('svelte-local-storage-store')

CJS require must destructure. However, the package is ESM-first and may not work with require in newer Node versions.

Shows basic usage of localStorageStore: creating a store, subscribing, setting, updating, and getting the value. Note the store is typed if using TypeScript.

import { localStorageStore } from 'svelte-local-storage-store'; import { get } from 'svelte/store'; // Create a persisted store with default value const count = localStorageStore('count', 0); // Subscribe const unsub = count.subscribe(value => { console.log('count:', value); }); // Update count.set(5); // saves to localStorage count.update(n => n + 1); // Get current value (outside Svelte component) console.log(get(count)); // 6 // Clean up unsub();

Debug

Known issues

deprecatedPackage has been renamed to svelte-persisted-store. This package will no longer receive updates.

fix

Migrate to svelte-persisted-store. The API is identical; just change the import source.

affects: >=0.0.0

breakingVersion 0.5.0 changed the export from a default export to a named export. Any code using 'import store from ...' will break.

fix

Change to named import: import { localStorageStore } from 'svelte-local-storage-store'.

affects: >=0.5.0 <1.0.0

gotchaThe store uses JSON.stringify/parse for serialization. Storing non-serializable values (e.g., Date, Map, Set) will cause data loss.

fix

Convert non-serializable values to a plain object mirror before storing, or implement custom serialization.

affects: >=0.0.0

gotchalocalStorage is not available in server-side rendering (SSR) contexts like SvelteKit load functions. Attempting to use the store there will throw a ReferenceError.

fix

Guard store usage with browser check (import { browser } from '$app/environment') or use the store only on the client side.

affects: >=0.0.0

deprecatedThe package has Svelte 3 peer dep version range ^3.48.0 || >4.0.0. It may not work with Svelte 5 or later.

fix

Consider using svelte-persisted-store which supports Svelte 4 and may be updated for Svelte 5.

affects: >=0.6.0

Errors

Common errors & fixes

TypeError: localStorageStore is not a function

Using default import when the package exports a named export.

fix

Use named import: import { localStorageStore } from 'svelte-local-storage-store'

ReferenceError: localStorage is not defined

Using the store in a server-side environment like SvelteKit load function or Node.js.

fix

Check if running in browser: if (typeof localStorage !== 'undefined') { ... }

Cannot find module 'svelte-local-storage-store' or its corresponding type declarations.

Package not installed or import path incorrect.

fix

Install the package: npm install svelte-local-storage-store. If using TypeScript, ensure tsconfig includes 'node_modules/@types' or the package's types.

Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Storage is disabled.

User's browser settings have disabled localStorage (e.g., private mode in some browsers, or localStorage quota exceeded).

fix

Catch the error or use a try-catch when accessing the store, or provide fallback in-memory store.

Upgrade

Version history

0.6.4latest on npm

Audit

Dependencies

svelterequiredPeer dependency: Svelte stores and reactivity are required for the store to function.

Agent activity

20 hits · last 30 days

node

Resources

githubhttps://github.com/joshnuss/svelte-local-storage-store ↗

packagesvelte-local-storage-store ↗

homepagehttps://github.com/joshnuss/svelte-local-storage-store#readme ↗