📚现代化浏览器本地存储解决方案以及落地实践

// 存储数据
localforage.setItem('username', 'John Doe').then(function () {
  console.log('数据存储成功！');
}).catch(function (err) {
  console.error('数据存储失败：', err);
});
// 获取数据
localforage.getItem('username').then(function (value) {
  console.log('获取的数据：', value);
}).catch(function (err) {
  console.error('获取数据失败：', err);
});
// 移除数据
localforage.removeItem('username').then(function () {
  console.log('数据已成功移除！');
}).catch(function (err) {
  console.error('数据移除失败：', err);
});

localforage.setItem('username', 'John Doe').then(function () {
  console.log('数据存储成功！');
}).catch(function (err) {
  console.error('数据存储失败：', err);
});

import React from 'react';
import { useLocalStorage } from './useLocalStorage';
function MyComponent() {
  const [data, setData] = useLocalStorage('myData', 'default-value',false,'my-domain');
  const handleChange = (event) => {
    setData(event.target.value);
  };
  return (
    <div>
      <input type="text" value={data} onChange={handleChange} />
      <p>Current value: {data}</p>
    </div>
  );
}
export default MyComponent;

export function useLocalStorage<T>(
  key: string,
  defaultValue: T,
  isDefaultOnFirst: boolean = true,
  pathname?: string
) {
  // ...
  return [state, updateState] as const;
}

import { useCallback, useEffect, useRef, useState } from 'react';
import localforage from 'localforage';
export function useLocalStorage<T>(
  key: string,
  defaultValue: T,
  isDefaultOnFirst: boolean = true
  pathname?: string,
) {
  const refKey = useRef(key);
  const refInit = useRef(false);
  const EventMapRef = useRef(new Map<string, Function[]>());
  const EventEmitterRef = useRef(
    class EventEmitter {
      static on<T>(key: string, callback: (value: T) => void) {
        if (EventMapRef.current.has(key)) {
          EventMapRef.current.get(key)?.push(callback);
        } else {
          EventMapRef.current.set(key, [callback]);
        }
        return () => {
          const funcList = EventMapRef.current.get(key);
          EventMapRef.current.set(
            key,
            funcList!.filter((func) => func !== callback),
          );
        };
      }
      static emit<T>(key: string, value: T) {
        if (EventMapRef.current.has(key)) {
          EventMapRef.current.get(key)?.forEach((func) => {
            func(value);
          });
        }
      }
    },
  );
  function getStoredValue() {
    return new Promise<T>((resolve) => {
      localforage
        .getItem(refKey.current)
        .then((raw) => {
          if (typeof raw !== 'undefined' && raw !== null) {
            resolve(raw as T);
          } else {
            resolve(defaultValue);
          }
        })
        .catch((e) => {
          console.error(e);
          resolve(defaultValue);
        });
    });
  }
  const [state, setState] = useState(
    isDefaultOnFirst ? defaultValue : undefined,
  );
  const [initSetList, setInitSetList] = useState<Function[]>([]);
  useEffect(() => {
    const path = pathname || location.pathname.replace(/\//g, '_');
    refKey.current = `${path}-${key}`;
    getStoredValue().then((value) => {
      setState(value);
      if (initSetList.length) {
        initSetList.forEach((func) => func());
      }
    });
    refInit.current = true;
  }, [key, pathname]);
  useEffect(() => {
    const handleEventEmitter = (eventValue: T) => {
      if (JSON.stringify(eventValue) !== JSON.stringify(state)) {
        updateState(eventValue, true);
      }
    };
    const removeHandler = EventEmitterRef.current.on<T>(
      key,
      handleEventEmitter,
    );
    return () => {
      removeHandler();
    };
  }, [state]);
  const updateState = useCallback(
    (value: T, isEmit?: boolean) => {
      function updateForageState(currentState: T) {
        setState(currentState);
        if (typeof currentState === 'undefined') {
          localforage.removeItem(refKey.current);
        } else {
          localforage
            .setItem(refKey.current, currentState)
            .then(() => {
              if (!isEmit) {
                console.log('emit');
                EventEmitterRef.current.emit(key, currentState);
              }
            })
            .catch((e) => {
              console.error(e);
            });
        }
      }
      if (!refInit.current) {
        setInitSetList((list) => [
          ...list,
          updateForageState.bind(useLocalStorage, value),
        ]);
      } else {
        updateForageState(value);
      }
    },
    [refKey, refInit, key],
  );
  return [state, updateState] as const;
}