vtils/react/useLocalStorage.js

一个面向业务的 JavaScript/TypeScript 实用程序库。

import { useCallback, useState } from 'react';
import { useLatest, useUpdateEffect } from 'react-use';
import { inMiniProgram } from "../utils/index.js";
var mp = inMiniProgram();
var storage = mp ? {
  get: function get(key) {
    return mp.getStorageSync(key);
  },
  set: function set(key, value) {
    return mp.setStorageSync(key, value);
  },
  remove: function remove(key) {
    return mp.removeStorageSync(key);
  }
} : {
  get: function get(key) {
    return localStorage.getItem(key);
  },
  set: function set(key, value) {
    return localStorage.setItem(key, value);
  },
  remove: function remove(key) {
    return localStorage.removeItem(key);
  }
};

/**
 * 已兼容小程序。
 */

/**
 * 已兼容小程序。
 */

export function useLocalStorage(key, initialState) {
  var getLocalStorageItem = useCallback(function () {
    try {
      var data = storage.get(key);
      if (data != null) {
        return JSON.parse(data);
      }
      return initialState;
    } catch (_unused) {
      return initialState;
    }
  }, [key, initialState]);
  var _useState = useState(getLocalStorageItem),
    state = _useState[0],
    setState = _useState[1];
  var latestKey = useLatest(key);
  var latestInitialState = useLatest(initialState);
  var latestState = useLatest(state);
  useUpdateEffect(function () {
    setState(getLocalStorageItem());
  }, [key]);
  var set = useCallback(function (nextState) {
    if (typeof nextState === 'function') {
      nextState = nextState(latestState.current);
    }
    setState(nextState);
    storage.set(latestKey.current, JSON.stringify(nextState));
  }, []);
  var reset = useCallback(function () {
    storage.remove(latestKey.current);
    setState(latestInitialState.current);
  }, []);
  return [state, set, reset];
}