ahooks封裝cookie?localStorage?sessionStorage方法

更新時(shí)間：2022年07月12日 09:39:30 作者：Gopal

這篇文章主要為大家介紹了ahooks封裝cookie?localStorage?sessionStorage的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

本文是深入淺出 ahooks 源碼系列文章的第九篇，這個(gè)系列的目標(biāo)主要有以下幾點(diǎn)：

加深對(duì) React hooks 的理解。
學(xué)習(xí)如何抽象自定義 hooks。構(gòu)建屬于自己的 React hooks 工具庫。
培養(yǎng)閱讀學(xué)習(xí)源碼的習(xí)慣，工具庫是一個(gè)對(duì)源碼閱讀不錯(cuò)的選擇。

今天來看看 ahooks 是怎么封裝 cookie/localStorage/sessionStorage 的。

cookie

ahooks 封裝了 useCookieState，一個(gè)可以將狀態(tài)存儲(chǔ)在 Cookie 中的 Hook 。

該 hook 使用了 js-cookie 這個(gè) npm 庫。我認(rèn)為選擇它的理由有以下：

包體積小。壓縮后小于 800 字節(jié)。自身是沒有其它依賴的。這對(duì)于原本就是一個(gè)工具庫的 ahooks 來講是很重要的。
更好的兼容性。支持所有的瀏覽器。并支持任意的字符。

當(dāng)然，它還有其他的特點(diǎn)，比如支持 ESM/AMD/CommonJS 方式導(dǎo)入等等。

封裝的代碼并不復(fù)雜，先看默認(rèn)值的設(shè)置，其優(yōu)先級(jí)如下：

本地 cookie 中已有該值，則直接取。
設(shè)置的值為字符串，則直接返回。
設(shè)置的值為函數(shù)，執(zhí)行該函數(shù)，返回函數(shù)執(zhí)行結(jié)果。
返回 options 中設(shè)置的 defaultValue。

const [state, setState] = useState<State>(() => {
  // 假如有值，則直接返回
  const cookieValue = Cookies.get(cookieKey);

  if (isString(cookieValue)) return cookieValue;
  // 定義 Cookie 默認(rèn)值，但不同步到本地 Cookie
  // 可以自定義默認(rèn)值
  if (isFunction(options.defaultValue)) {
    return options.defaultValue();
  }

  return options.defaultValue;
});

再看設(shè)置 cookie 的邏輯 —— updateState 方法。

在使用 updateState 方法的時(shí)候，開發(fā)者可以傳入新的 options —— newOptions。會(huì)與 useCookieState 設(shè)置的 options 進(jìn)行 merge 操作。最后除了 defaultValue 會(huì)透傳給 js-cookie 的 set 方法的第三個(gè)參數(shù)。
獲取到 cookie 的值，判斷傳入的值，假如是函數(shù)，則取執(zhí)行后返回的結(jié)果，否則直接取該值。
如果值為 undefined，則清除 cookie。否則，調(diào)用 js-cookie 的 set 方法。
最終返回 cookie 的值以及設(shè)置的方法。

// 設(shè)置 Cookie 值
const updateState = useMemoizedFn(
  (
    newValue: State | ((prevState: State) => State),
    newOptions: Cookies.CookieAttributes = {},
  ) => {
    const { defaultValue, ...restOptions } = { ...options, ...newOptions };
    setState((prevState) => {
      const value = isFunction(newValue) ? newValue(prevState) : newValue;
      // 值為 undefined 的時(shí)候，清除 cookie
      if (value === undefined) {
        Cookies.remove(cookieKey);
      } else {
        Cookies.set(cookieKey, value, restOptions);
      }
      return value;
    });
  },
);

return [state, updateState] as const;

localStorage/sessionStorage

ahooks 封裝了 useLocalStorageState 和 useSessionStorageState。將狀態(tài)存儲(chǔ)在 localStorage 和 sessionStorage 中的 Hook 。

兩者的使用方法是一樣的，因?yàn)楣俜蕉际怯玫耐粋€(gè)方法去封裝的。我們以 useLocalStorageState 為例。

可以看到 useLocalStorageState 其實(shí)是調(diào)用 createUseStorageState 方法返回的結(jié)果。該方法的入?yún)?huì)判斷是否為瀏覽器環(huán)境，以決定是否使用 localStorage，原因在于 ahooks 需要支持服務(wù)端渲染。

import { createUseStorageState } from '../createUseStorageState';
import isBrowser from '../utils/isBrowser';

const useLocalStorageState = createUseStorageState(() => (isBrowser ? localStorage : undefined));

export default useLocalStorageState;

我們重點(diǎn)關(guān)注一下，createUseStorageState 方法。

先是調(diào)用傳入的參數(shù)。假如報(bào)錯(cuò)會(huì)及時(shí) catch。這是因?yàn)椋?/p>

這里返回的 storage 可以看到其實(shí)可能是 undefined 的，后面都會(huì)有 catch 的處理。
另外，從這個(gè) issue 中可以看到 cookie 被 disabled 的時(shí)候，也是訪問不了 localStorage 的。stackoverflow 也有這個(gè)討論。（奇怪的知識(shí)又增加了）

export function createUseStorageState(getStorage: () => Storage | undefined) {
  function useStorageState<T>(key: string, options?: Options<T>) {
    let storage: Storage | undefined;
    // https://github.com/alibaba/hooks/issues/800
    try {
      storage = getStorage();
    } catch (err) {
      console.error(err);
    }
    // 代碼在后面講解
}

支持自定義序列化方法。沒有則直接 JSON.stringify。
支持自定義反序列化方法。沒有則直接 JSON.parse。
getStoredValue 獲取 storage 的默認(rèn)值，如果本地沒有值，則返回默認(rèn)值。
當(dāng)傳入 key 更新的時(shí)候，重新賦值。

// 自定義序列化方法
const serializer = (value: T) => {
  if (options?.serializer) {
    return options?.serializer(value);
  }
  return JSON.stringify(value);
};

// 自定義反序列化方法
const deserializer = (value: string) => {
  if (options?.deserializer) {
    return options?.deserializer(value);
  }
  return JSON.parse(value);
};

function getStoredValue() {
  try {
    const raw = storage?.getItem(key);
    if (raw) {
      return deserializer(raw);
    }
  } catch (e) {
    console.error(e);
  }
  // 默認(rèn)值
  if (isFunction(options?.defaultValue)) {
    return options?.defaultValue();
  }
  return options?.defaultValue;
}

const [state, setState] = useState<T | undefined>(() => getStoredValue());

// 當(dāng) key 更新的時(shí)候執(zhí)行
useUpdateEffect(() => {
  setState(getStoredValue());
}, [key]);

最后是更新 storage 的函數(shù)：

如果是值為 undefined，則 removeItem，移除該 storage。
如果為函數(shù)，則取執(zhí)行后結(jié)果。
否則，直接取值。

// 設(shè)置 State
const updateState = (value?: T | IFuncUpdater<T>) => {
  // 如果是 undefined，則移除選項(xiàng)
  if (isUndef(value)) {
    setState(undefined);
    storage?.removeItem(key);
    // 如果是function，則用來傳入 state，并返回結(jié)果
  } else if (isFunction(value)) {
    const currentState = value(state);
    try {
      setState(currentState);
      storage?.setItem(key, serializer(currentState));
    } catch (e) {
      console.error(e);
    }
  } else {
    // 設(shè)置值
    try {
      setState(value);
      storage?.setItem(key, serializer(value));
    } catch (e) {
      console.error(e);
    }
  }
};

總結(jié)與歸納

對(duì) cookie/localStorage/sessionStorage 的封裝是我們經(jīng)常需要去做的，ahooks 的封裝整體比較簡，以上就是ahooks封裝cookie localStorage sessionStorage方法的詳細(xì)內(nèi)容，更多關(guān)于ahooks封裝cookie localStorage sessionStorage的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: