An attempt to implement persistent store using localStorage in SvelteKit

persistent.svelte.ts

import { browser } from '$app/environment'

export type PersistentStore<T> = ReturnType<typeof newPersistentStore<T>>

export function newPersistentStore<T>(key: string, initial: T) {
	let value = $state<T>(initial)
	let mounted = $state(false)
	const storeName = `Persistent store '${key}'`

	function mount() {
		if (!browser) throw `${storeName} mounted outside of browser`
		if (mounted) {
			console.warn(`Repeated attempt to mount ${storeName}`)
			return
		}

		const item = localStorage.getItem(key)
		if (item) value = JSON.parse(item)
		mounted = true

		window.addEventListener('storage', (e: StorageEvent) => {
			if (e.storageArea !== localStorage || e.key != key) return
			const newValue = localStorage.getItem(key)
			if (newValue === null) {
				value = initial
			} else {
				value = JSON.parse(newValue)
			}
		})

		$effect(() => {
			if (!browser) throw `${storeName} updated outside of browser`
			if (!mounted) throw `${storeName}: attempt to update value before mount`

			localStorage.setItem(key, JSON.stringify(value))
		})

		console.log(`${storeName} init finished`)
	}

	function set(newValue: T) {
		if (!mounted) throw `${storeName}: attempt to set value before mount`
		value = newValue
	}

	function get(): T {
		if (!mounted) throw `${storeName}: attempt to get value before mount`
		return value
	}

	return {
		value: get,
		set,

		mounted: () => mounted,
		mount,
	}
}