---
title: "useSessionStorage 用法与示例"
description: "useSessionStorage 是一个将 state 绑定到 sessionStorage 键的 React hook，返回类似 useState 的元组，支持 SSR 安全、自定义序列化器和跨标签页同步。"
canonical: https://reactuse.com/zh-Hans/state/usesessionstorage/
---

# useSessionStorage

轻松管理 `sessionStorage`

`useSessionStorage` 将 React 状态绑定到一个 `sessionStorage` 键。它返回一个行为类似 `useState` 的 `[value, setValue]` 元组。值在挂载时从会话存储中读取，在更新时写回。将值设为 `null` 移除该键。与 `useLocalStorage` 一样，它支持自定义序列化器，默认监听跨标签页的 `storage` 事件。

### 使用场景

- 存储在同一标签页内页面导航之间应持久化但不跨浏览器重启的临时状态
- 保持向导或多步骤表单进度，用户关闭标签页时重置
- 缓存敏感或会话特定的数据（例如一次性令牌、临时筛选器）

### 注意事项

- **会话作用域**：与 `localStorage` 不同，`sessionStorage` 中的数据在标签页或浏览器关闭时被清除。使用 `useLocalStorage` 进行长期持久化。
- **同标签页同步**：绑定到相同键的多个组件会在同一标签页内保持同步——更新一个会让其他组件无需刷新即可重新渲染。（`sessionStorage` 按标签页隔离，因此不会跨标签页。）跨标签页 `storage` 监听默认开启，可通过 `listenToStorageChanges: false` 禁用。
- **自定义序列化**：在选项中为非字符串数据类型提供 `serializer.read` 和 `serializer.write`。
- 参见 `useLocalStorage` 了解持久化存储，以及 `useCookie` 了解基于 cookie 的持久化。

## Usage

```tsx live

function Demo() {
  const [value, setValue] = useSessionStorage("my-key", "key");

  return (
    <div>
      <div>值: {value}</div>
      <button onClick={() => setValue("bar")}>设置为bar</button>
      <button onClick={() => setValue("baz")}>设置为baz</button>
      <button onClick={() => setValue(null)}>移除</button>
    </div>
  );
};

```

%%API%%