useLocalStorage

轻松管理 localStorage

Usage

实时编辑器

function Demo() {
  // 绑定字符串
  const [value, setValue] = useLocalStorage("my-key", "key");
  
  // 绑定对象（使用自定义序列化器）
  const [myObj, setMyObj] = useLocalStorage(
    "myObj",
    {
      name: "test",
    },
    {
      serializer: {
        read: (val) => {
          console.log("读取", val);
          return JSON.parse(val);
        },
        write: (val) => {
          console.log("写入", val);
          return JSON.stringify(val);
        },
      },
    }
  );

  return (
    <div>
      <div>
        <h3>字符串值</h3>
        <div>值: {value}</div>
        <button onClick={() => setValue("bar")}>设置为 "bar"</button>
        <button onClick={() => setValue("baz")}>设置为 "baz"</button>
        <button onClick={() => setValue(null)}>移除</button>
      </div>
      
      <div style={{ marginTop: "20px" }}>
        <h3>对象值</h3>
        <div>对象: {JSON.stringify(myObj)}</div>
        <button onClick={() => setMyObj({ name: "updated" })}>
          更新对象
        </button>
        <button onClick={() => setMyObj({ name: "test", count: 1 })}>
          添加属性
        </button>
        <button onClick={() => setMyObj(null)}>移除对象</button>
      </div>
    </div>
  );
};

结果

字符串值

值: key

对象值

对象: {"name":"test"}

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) => void	console.error
effectStorageValue	首次挂载时没有数据时设置到 storage, 已弃用	T | (() => T)	-
mountStorageValue	首次挂载时没有数据时设置到 storage	T | (() => T)	-
listenToStorageChanges	监听 storage 变化	boolean	true

UseLocalStorageSerializer

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