Browser

useSessionStorage

Reactive sessionStorage binding. Thin wrapper around createStorage with ObservablePersistSessionStorage as the persist plugin. Values persist only for the current browser session.

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

Demo

useSessionStorage

Session

Persisted only for this browser session. Closes with the tab, survives reloads.

Key

demo-wizard-step

Step

1 / 5

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

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

  return (
    <
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
      <
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>Step: {
const step$: any
step$.
any
get()}</
JSX.IntrinsicElements.p: DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>
p>
      <
JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button 
DOMAttributes<HTMLButtonElement>.onClick?: MouseEventHandler<HTMLButtonElement> | undefined
onClick={() => 
const step$: any
step$.
any
set(
const step$: any
step$.
any
get() + 1)}>Next</
JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
button>
    </
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div>
  );
}

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

function Component() {
  "use scope"
  const step$ = createSessionStorage("wizard-step", 1);

  return (
    <div>
      <p>Step: {step$.get()}</p>
      <button onClick={() => step$.set(step$.get() + 1)}>Next</button>
    </div>
  );
}

Persisting object values

Hook
Scope

const wizard$ = useSessionStorage("wizard", { step: 1, data: {} });

wizard$.step.set(2);

function Component() {
  "use scope"
  const wizard$ = createSessionStorage("wizard", { step: 1, data: {} });

  wizard$.step.set(2);
}

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 sessionStorage.

Source

View on GitHub