本地存储

useLocalStorage

参考来源：

1. https://www.jianshu.com/p/3375eaa23e2e
2. https://blog.csdn.net/qq_40319394/article/details/121495132
3. https://github.com/dance2die/react-use-localstorage/blob/master/src/index.ts

最后一次更新：2021/12/10

/**
 * 读取和设置 localStorage 的 hook
 * @param {string} key 在 localStorage 中使用的字段名
 * @param {*} initialValue  初始值
 * @returns {Array.<{value: *, setItem: function}>} 值和修改值的方法
 */
export const useLocalStorage = (key, initialValue = null) => {
  const [value, setValue] = useState(() => {
    const dataJSON = window.localStorage.getItem(key);
    if (!dataJSON) return initialValue;
    return JSON.parse(dataJSON);
  });

  // 修改 value 并更新 localStorage
  const setItem = (newValue) => {
    setValue(newValue);
    window.localStorage.setItem(key, JSON.stringify(newValue));
  };

  // 当 localStorage 发生变化时，修改 value
  const refresh = useCallback(
    (event) => {
      // 如果变化包含该 key 则更新 value
      if (event.key === key && event.newValue !== value) {
        setValue(event.newValue || initialValue);
      }
      // 如果是清空 localStorage，则初始化 value
      if (!window.localStorage.getItem(key)) {
        setValue(initialValue);
      }
    },
    [key, initialValue, value]
  );

  // 初始化，注册监听器
  useEffect(() => {
    window.addEventListener('storage', refresh);
    return () => window.removeEventListener('storage', refresh);
  }, [refresh]);
  return [value, setItem];
};

Q.E.D.