persist.svelte.ts

import cookies from 'browser-cookies';
import { browser } from '$app/environment';

let { erase, get, set } = cookies;

export class LocalStore<T> {
	value = $state<T>() as T;
	key = '';

	constructor(key: string, default: T) {
		this.key = key;
		this.value = default;

		if (browser) {
			const item = get(key);
			if (item) this.value = this.deserialize(item);
		}

		$effect.root(() => {
			$effect(() => {
				if (this.value) {
					set(this.key, this.serialize(this.value));
				} else {
					erase(this.key);
				}
			});
		});
	}

	serialize(value: T): string {
		return JSON.stringify(value);
	}

	deserialize(item: string): T {
		return JSON.parse(item);
	}
}

// example
let theme = new LocalStore<string>('theme', 'light');