Persistence

The persistence adapter saves and restores panel state using localStorage by default, but works with any Storage-compatible object — including sessionStorage. It is an optional module — import it only when you need it.

Usage

import { persistPanel } from "param-panel/persistence";

const persistence = persistPanel(pp, {
  key: "edge-detector",
  storage: localStorage,
  debounce: 250,
});

Configuration & Interface

interface PersistenceConfig {
  key: string;

  /**
   * Where to persist state.
   *
   * Defaults to `localStorage`. Pass `sessionStorage` to scope state to the
   * current tab/session instead of surviving across browser restarts, or
   * any other object implementing the `Storage` interface.
   */
  storage?: Storage;

  debounce?: number;
}

interface PanelPersistence {
  save(): void;
  load(): void;
  clear(): void;
  destroy(): void;
}

• key — the storage key.
• storage — defaults to localStorage.
• debounce — milliseconds to wait before writing.

Behavior

Under the hood the adapter subscribes to the panel via pp.onChange, so it sees every committed change without you wiring up individual controls. It is designed to be quiet and safe:

• Writes are debounced, so dragging a slider does not hammer storage.
• Intermediate slider changes do not write immediately; final changes trigger persistence.
• Invalid saved data fails gracefully rather than throwing.
• The stored state carries a version so future migrations are possible.
• destroy() removes all subscriptions and timers.

localStorage vs. sessionStorage

storage is the only knob — both implement the same Storage interface, so nothing else about the API changes.

localStorage (default) survives browser restarts:

const persistence = persistPanel(pp, {
  key: "my-webgpu-demo",
});

window.addEventListener("beforeunload", () => {
  persistence.save();
});

sessionStorage scopes state to the current tab and clears it when the tab closes:

const persistence = persistPanel(pp, {
  key: "my-webgpu-demo",
  storage: sessionStorage,
});

Call clear() to wipe the saved state, or load() to re-apply it on demand.