Local Storage Stores in Svelte

This repo provides a general function local_store in src/lib/stores.ts (see also below) that generates stores that will be synced with the browser's localStorage. This can be used to persist user preferences easily. The Svelte app demonstrates this with a couple of examples.

https://localstoragestore.netlify.app

Code

function local_store<T>(
	key: string,
	default_value: T,
	update: (value: T) => void = () => {}
): Writable<T> {
	let initial_value: T
	try {
		const has_stored_value = localStorage.getItem(key) !== null
		initial_value = has_stored_value
			? JSON.parse(localStorage.getItem(key)!)
			: default_value
	} catch (_) {
		initial_value = default_value
	}

	const store = writable<T>(initial_value)

	store.subscribe((value: T) => {
		localStorage.setItem(key, JSON.stringify(value))
		update(value)
	})

	return store
}

SvelteKit considerations

For SvelteKit applications, make sure to always check if browser=true before using the localStorage, since otherwise you will run into an error: the server has no localStorage global.