A SolidJS signal that maintains persistence in local or session storage.

createStoredSignal.ts

import { createSignal, Signal } from "solid-js";

export function createStoredSignal<T>(key: string, defaultValue: T, storage = localStorage): Signal<T> {
  const initialValue = tryToParse(storage.getItem(key), defaultValue);
  const [value, setValue] = createSignal<T>(initialValue);

  const setValueAndStore = ((arg) => {
    const v = setValue(arg);
    storage.setItem(key, JSON.stringify(v));
    return v;
  }) as typeof setValue;

  return [value, setValueAndStore];
}

function tryToParse<T>(json: string | null | undefined, fallback: T): T {
  if (!json) return fallback;
  try {
    return JSON.parse(json) as T;
  } catch {
    return fallback;
  }
}