useSessionStorage

輕鬆管理 sessionStorage

useSessionStorage 提供響應式的 sessionStorage 讀寫。它回傳一個元組，包含當前儲存的值和一個更新函式。與 localStorage 不同，sessionStorage 的資料只在當前工作階段（分頁）中持久化，關閉分頁後會被清除。

使用場景

• 儲存僅在當前瀏覽工作階段中需要的臨時資料
• 持久化表單狀態以在頁面內導航時保留（但關閉分頁後不保留）
• 儲存敏感的暫時資料，不希望在關閉分頁後持久化

注意事項

• SSR 安全：在伺服器端渲染時回傳預設值。伺服器上不會存取 sessionStorage。
• 工作階段範圍：資料僅在當前分頁的生命週期內持久化。不同分頁之間不共享。
• 相關 hooks：另請參閱 useLocalStorage 用於跨工作階段的持久化，以及 useCookie 用於 cookie 儲存。

Usage

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

useSessionStorage

Returns

readonly [T | null, React.Dispatch<React.SetStateAction<T | null>>]: 包含以下元素的元組：

• sessionStorage 的當前值。
• 更新 sessionStorage 值的函數。

Arguments

UseSessionStorageOptions

UseSessionStorageSerializer