Browser

useLocalStorage

Reactive localStorage binding. Thin wrapper around createStorage with ObservablePersistLocalStorage as the persist plugin.

See useStorage and Legend-State persist & sync for advanced usage.

Demo

useLocalStorage

Persisted

Persisted across reloads via localStorage. Reload the page — the value sticks.

Key

demo-theme

Value

light

import { 
const useLocalStorage: <T>(key: string, defaults: T) => Observable<T>
useLocalStorage } from "@usels/web";

function 
function Component(): JSX.Element
Component() {
  const 
const count$: any
count$ = 
useLocalStorage<number>(key: string, defaults: number): any
Framework-agnostic reactive localStorage binding. Thin wrapper around
createStorage with ObservablePersistLocalStorage as the persist plugin.
@param ― key - Storage key.
@param ― defaults - Initial value and type inference source.
@returns ― A writable Observable<T> backed by localStorage.
useLocalStorage("count", 0);

  return (
    <
JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button 
DOMAttributes<HTMLButtonElement>.onClick?: MouseEventHandler<HTMLButtonElement> | undefined
onClick={() => 
const count$: any
count$.
any
set(
const count$: any
count$.
any
get() + 1)}>Count: {
const count$: any
count$.
any
get()}</
JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button>
  );
}

import { createLocalStorage } from "@usels/web";

function Component() {
  "use scope"
  const count$ = createLocalStorage("count", 0);

  return (
    <button onClick={() => count$.set(count$.get() + 1)}>Count: {count$.get()}</button>
  );
}

Persisting object values

Hook
Scope

const profile$ = useLocalStorage("profile", { name: "", age: 0 });

profile$.name.set("Alice");

function Component() {
  "use scope"
  const profile$ = createLocalStorage("profile", { name: "", age: 0 });

  profile$.name.set("Alice");
}

Type

Parameters

Parameter	Type	Description
`key`	`string`	- Storage key.
`defaults`	`T`	- Initial value and type inference source.

Returns

Observable<T>

A writable Observable<T> backed by localStorage.

Source

View on GitHub