furudean/svelte-persistent-store

Svelte store that saves and loads data from localStorage or sessionStorage

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
})

svelte-persistent-store's Issues

more clear on documentation

hi thank you for the post, but it still so hard for me to understand on how to use this library, could you please updates the readme so its has more use case and on which file it should be implemented?

Usage with SvelteKit?

I'm attempting to use this in SvelteKit but getting:

TypeError: Failed to fetch dynamically imported module:

Is there any config needed for Vite/Svelte to get this working?