时间戳

首页 > 解决方案 > 将列表更改保存到 React 中的本地存储

reactjs - 将列表更改保存到 React 中的本地存储

问题描述

我有一个被调用列表的集合allLists，当我进行更改（例如添加新列表或更新现有列表）时，allLists我希望将更改保存到本地存储中。我遇到了这个问题，当我刷新它似乎不起作用。

自定义本地存储挂钩：

export function useLocalStorage(key, defaultValue, mapper = (str) => str) {
  const getInitialValue = () =>
    localStorage.getItem(key) !== null
      ? mapper(localStorage.getItem(key))
      : defaultValue;
  const [value, setValue] = useState(getInitialValue);
  const setAndStoreValue = (newValue) => {
    if (newValue !== "") {
      setValue(newValue);
      localStorage.setItem(key, newValue);
    }
  };
  return [value, setAndStoreValue];
}

我如何使用保存到 allList 到本地存储

const [allLists, setAllLists] = useLocalStorage('allLists', [initialLists]);

Codesandbox 示例： 链接

标签： reactjsreact-hookslocal-storagereact-typescript

解决方案

由于缺少有效的and ，保存和从中获取值localStorage不起作用。您可以更新您的钩子以具有默认( ) 和( ) 的实现，如下所示：-serializerdeserializeruseLocalStorageserializerJSON.stringifydeserializerJSON.parse

export function useLocalStorage(key, defaultValue, {serializer = JSON.stringify,deserializer=JSON.parse}={}) {
  const getInitialValue = () =>
    localStorage.getItem(key) !== null
      ? deserializer(localStorage.getItem(key))
      : defaultValue;
  const [value, setValue] = useState(getInitialValue);
  const setAndStoreValue = (newValue) => {
    if (newValue !== "") {
      setValue(newValue);
      localStorage.setItem(key, serializer(newValue));
    }
  };
  return [value, setAndStoreValue];
}

分叉的 Codesandbox :-

编辑 React - 将更改保存到本地存储（分叉）

注意：-您可能需要额外的逻辑来处理尝试使用字符串而不是字符串化对象进行反序列JSON.parse(..)化的情况，因为这会导致错误。您可以将自定义函数传递给您的钩子，为您处理所有这些。

推荐阅读