跳到主要内容

useLocalStorage

轻松管理 localStorage

Usage​

实时编辑器

function Demo() {
  // bind string
  const [value, setValue] = useLocalStorage("my-key", "key");

  return (
    <div>
      <div>Value: {value}</div>
      <button onClick={() => setValue("bar")}>bar</button>
      <button onClick={() => setValue("baz")}>baz</button>
      {/* delete data from storage */}
      <button onClick={() => setValue(null)}>Remove</button>
    </div>
  );
};
结果
Loading...

API​

useLocalStorage​

Returns​

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

  • localStorage 的当前值。
  • 更新 localStorage 值的函数。

Arguments​

参数名描述类型默认值
key键值string (必填)-
defaultValue默认值T | undefined-
options可选参数UseLocalStorageOptions<T> | undefined-

UseLocalStorageOptions​

参数名描述类型默认值
serializer自定义数据序列化UseLocalStorageSerializer<T>-
onError错误回调(error: unknown) => voidconsole.error
effectStorageValue当副作用执行的时候没有在 storage 中获取到数据时设置，默认会设置 defaultValueT | (() => T)-

UseLocalStorageSerializer​

参数名描述类型默认值
read自定义数据读取(raw: string) => T (必填)-
write自定义数据写入(value: T) => string (必填)-