跳至主要内容

useSessionStorage

輕鬆管理 sessionStorage

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>
  );
};
結果
Loading...

API​

useSessionStorage​

Returns​

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

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

Arguments​

參數名描述類型預設值
key键值string (必填)-
defaultValue默认值T | undefined-
options可选参数UseSessionStorageOptions<T> | undefined-

UseSessionStorageOptions​

參數名描述類型預設值
serializer自定义数据序列化UseSessionStorageSerializer<T>-
onError错误回调(error: unknown) => voidconsole.error
effectStorageValue首次挂载时没有数据时设置到 storage, 已弃用T | (() => T)-
mountStorageValue首次挂载时没有数据时设置到 storageT | (() => T)-
listenToStorageChanges监听 storage 变化booleantrue

UseSessionStorageSerializer​

參數名描述類型預設值
read自定义数据读取(raw: string) => T (必填)-
write自定义数据写入(value: T) => string (必填)-