// localStore.svelte.js
export function createLocalStore(key, initial) {
  const saved = localStorage.getItem(key);
  let value = $state(saved !== null ? JSON.parse(saved) : initial);

  // Persist to localStorage whenever value changes.
  $effect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  });

  return {
    get value() { return value; },
    set value(v) { value = v; },
  };
}


<!-- src/PersistentCounter.svelte -->
<script>
  import { createLocalStore } from './localStore.svelte.js';

  const store = createLocalStore('count', 0);
</script>

<p>Count: {store.value}</p>
<button onclick={() => store.value++}>+1</button>
<button onclick={() => (store.value = 0)}>Reset</button>

<!--
  Notes:
  - The factory returns a getter/setter pair, so `store.value` reads and
    writes the live reactive value while keeping its binding — store.value++
    and store.value = 0 both work and stay reactive.
  - The $effect inside the factory re-runs whenever value changes,
    persisting it to localStorage; the initial read seeds it back on
    load, so the count survives a refresh.
  - $effect works here only because the file is a .svelte.js module.
  - saved !== null (not just `saved`) so a stored 0 isn't mistaken for
    "nothing saved."
-->