LocalStorage

import { onMount } from "svelte";
import { writable } from "svelte/store";

export function createLocalStorage(
	key: string,
	defaultValue: string,
	sync: boolean = false,
) {
	const value = writable(window.localStorage.getItem(key) ?? defaultValue);

	const setter = (newValue: string) => {
		window.localStorage.setItem(key, newValue);
		value.set(newValue);
	};

	onMount(() => {
		const storage = (event: StorageEvent) => {
			if (event.key === key) {
				value.set(event.newValue ?? defaultValue);
			}
		};

		if (sync) {
			window.addEventListener("storage", storage);
		}

		return () => {
			if (sync) {
				window.removeEventListener("storage", storage);
			}
		};
	});

	return [value, setter] as const;
}

<script lang="ts">
	import { createSearchParam } from "@hooks/SvelteLocalStorage.svelte";

	const MODES = ["LIGHT", "DARK"] as const;

	const [storageMode, setStorageMode] = createLocalStorage(
		"mode",
		MODES[0],
		true,
	);
</script>

<div>
	<select
		onchange={(event) => {
			setStorageMode(event.currentTarget.value);
		}}
		value={$storageMode}
	>
		{#each MODES as mode (mode)}
			<option value={mode}>{mode}</option>
		{/each}
	</select>
	<div>{$storageMode}</div>
</div>