@sv-use/core/dist/local-state/index.svelte.js

A collection of Svelte 5 utilities.

import { BROWSER } from 'esm-env';
/**
 * A state that is synced with local storage.
 * @param key The key to use in local storage.
 * @param value The initial value of the state.
 * @param options Additional options to customize the behavior.
 * @returns A reactive `current` property.
 * @see https://svelte-librarian.github.io/sv-use/docs/core/local-state
 */
export function localState(key, value, options = {}) {
    const { serialize = JSON.stringify, deserialize = JSON.parse, overrideDefault = false } = options;
    const _state = $state({ current: value });
    if (BROWSER) {
        if (localStorage.getItem(key) && !overrideDefault) {
            _state.current = deserialize(localStorage.getItem(key));
        }
        else {
            localStorage.setItem(key, serialize(value));
        }
    }
    $effect(() => {
        localStorage.setItem(key, serialize(_state.current));
    });
    return _state;
}