svelte-persistent-store Svelte Themes

Svelte Persistent Store

Svelte store that saves and loads data from localStorage or sessionStorage

A girl

svelte-persistent-store

This is a writable svelte store that saves and loads data from Window.localStorage or Window.sessionStorage. Works with Svelte Kit out of the box.

The store listens to events from the Storage interface and will sync its internal state upon changes. This makes debugging using the developer console easy, and it will update across sessions as well.

Install

npm install @furudean/svelte-persistent-store

Use

Note: By default only JSON serializable values are handled, but custom serialization and deserialization functions can be provided.

import { persistent } from "@furudean/svelte-persistent-store"

const preferences = persistent({
    start_value: {
        foo: "bar"
    },
    key: "preferences", // key to save as in Storage
    storage_type: "localStorage" // Storage object to use
})

Custom serialization functions

Since the Storage interface only supports strings, data needs to be converted to strings before saving. By default JSON.stringify and JSON.parse is used.

You can pass custom serializer and deserializer functions if you require specific behavior when loading or saving data from Storage. For example, you can handle Dates like this:

const persistent_date = persistent({
    start_value: new Date(),
    key: "my-persistent-date",
    storage_type: "localStorage",
    serialize: (date) => date.toISOString(), // transform before saving
    deserialize: (str) => new Date(str) // transform after loading
})

Top categories

Loading Svelte Themes