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

Question

我有一个名为 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 示例： link

Answer 1

由于缺少有效的 serializer 和 deserializer，无法从 localStorage 中保存和获取值。您可以更新您的 useLocalStorage 挂钩以实现具有默认 serializer (JSON.stringify) 和 deserializer (JSON.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];
}

Forked Codesandbox :-

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

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

Saving list changes to local storage in React

local-storage

reactjs

react-hooks

react-typescript