---
title: useSessionStorage
description: "Reactive `sessionStorage` binding. Thin wrapper around `createStorage` with `ObservablePersistSessionStorage` as the persist plugin. Values persist only for the current browser session."
category: Browser
type-table:
  import: "@usels/web"
  name: "UseSessionStorage"
---

See [useStorage](/core/sync/usestorage) and [Legend-State persist & sync](https://legendapp.com/open-source/state/v3/sync/persist-sync/) for advanced usage.

## Demo

## Usage

<CodeTabs>
  <Fragment slot="hook">
    ```tsx twoslash
    // @noErrors
    import { useSessionStorage } from "@usels/web";

    function Component() {
      const step$ = useSessionStorage("wizard-step", 1);

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

  </Fragment>
  <Fragment slot="scope">
    ```tsx
    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>
      );
    }
    ```

  </Fragment>
</CodeTabs>

### Persisting object values

<CodeTabs>
  <Fragment slot="hook">
    ```tsx
    const wizard$ = useSessionStorage("wizard", { step: 1, data: {} });

    wizard$.step.set(2);
    ```

  </Fragment>
  <Fragment slot="scope">
    ```tsx
    function Component() {
      "use scope"
      const wizard$ = createSessionStorage("wizard", { step: 1, data: {} });

      wizard$.step.set(2);
    }
    ```

  </Fragment>
</CodeTabs>