关于ahooks封装cookie localStorage sessionStorage方法

　　之所以讲这篇文章主要是为了加深对 React hooks 的理解。

　　因此，先要学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库。

　　且培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。

　　现在看下ahooks 是怎么封装 cookie/localStorage/sessionStorage 的。

　　cookie

　　ahooks 封装了 useCookieState，一个可以将状态存储在 Cookie 中的 Hook 。

　　该 hook 使用了js-cookie这个 npm 库。为什么用它：

　　主要就是由于包体积小。压缩后小于 800 字节。自身是没有其它依赖的。这对于原本就是一个工具库的 ahooks 来讲是很重要的。而且它拥有更好的兼容性。支持所有的浏览器。并支持任意的字符。

　　除此之外，它还有其他的特点，比如支持 ESM/AMD/CommonJS 方式导入等等。

　　封装的代码并不复杂，先看默认值的设置，其优先级如下：

　　本地 cookie 中已有该值，则直接取。

　　设置的值为字符串，则直接返回。

　　设置的值为函数，执行该函数，返回函数执行结果。

　　返回 options 中设置的 defaultValue。

　　const [state, setState] = useState<State>(() => {
　　// 假如有值，则直接返回
　　const cookieValue = Cookies.get(cookieKey);
　　if (isString(cookieValue)) return cookieValue;
　　// 定义 Cookie 默认值，但不同步到本地 Cookie
　　// 可以自定义默认值
　　if (isFunction(options.defaultValue)) {
　　return options.defaultValue();
　　}
　　return options.defaultValue;
　　});

　　再看设置 cookie 的逻辑 ——updateState方法。

　　在使用updateState方法的时候，开发者可以传入新的 options —— newOptions。会与 useCookieState 设置的 options 进行 merge 操作。最后除了 defaultValue 会透传给 js-cookie 的 set 方法的第三个参数。

　　获取到 cookie 的值，判断传入的值，假如是函数，则取执行后返回的结果，否则直接取该值。

　　如果值为 undefined，则清除 cookie。否则，调用 js-cookie 的 set 方法。

　　最终返回 cookie 的值以及设置的方法。

　　// 设置 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 的时候，清除 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。将状态存储在 localStorage 和 sessionStorage 中的 Hook 。

　　两者的使用方法是一样的。现在来说说 useLocalStorageState 。

　　 useLocalStorageState就是用来调用 createUseStorageState 方法返回的结果。该方法的入参会判断是否为浏览器环境，以决定是否使用 localStorage，原因在于 ahooks 需要支持服务端渲染。　

　import { createUseStorageState } from '../createUseStorageState';
　　import isBrowser from '../utils/isBrowser';
　　const useLocalStorageState = createUseStorageState(() => (isBrowser ? localStorage : undefined));
　　export default useLocalStorageState;

　　我们重点关注一下，createUseStorageState 方法。

　　先是调用传入的参数。假如报错会及时 catch。这是因为：

　　这里返回的 storage 可以看到其实可能是 undefined 的，后面都会有 catch 的处理。

　　另外，从这个issue中可以看到 cookie 被 disabled 的时候，也是访问不了 localStorage 的。stackoverflow也有这个讨论。（奇怪的知识又增加了）

　　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 的默认值，如果本地没有值，则返回默认值。

　　当传入 key 更新的时候，重新赋值。

　　// 自定义序列化方法
　　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);
　　}
　　// 默认值
　　if (isFunction(options?.defaultValue)) {
　　return options?.defaultValue();
　　}
　　return options?.defaultValue;
　　}
　　const [state, setState] = useState<T | undefined>(() => getStoredValue());
　　// 当 key 更新的时候执行
　　useUpdateEffect(() => {
　　setState(getStoredValue());
　　}, [key]);

　　最后是更新 storage 的函数：

　　如果是值为 undefined，则 removeItem，移除该 storage。

　　如果为函数，则取执行后结果。

　　否则，直接取值。

　　// 设置 State
　　const updateState = (value?: T | IFuncUpdater<T>) => {
　　// 如果是 undefined，则移除选项
　　if (isUndef(value)) {
　　setState(undefined);
　　storage?.removeItem(key);
　　// 如果是function，则用来传入 state，并返回结果
　　} else if (isFunction(value)) {
　　const currentState = value(state);
　　try {
　　setState(currentState);
　　storage?.setItem(key, serializer(currentState));
　　} catch (e) {
　　console.error(e);
　　}
　　} else {
　　// 设置值
　　try {
　　setState(value);
　　storage?.setItem(key, serializer(value));
　　} catch (e) {
　　console.error(e);
　　}
　　}
　　};

　　总结与归纳

　　对 cookie/localStorage/sessionStorage 的封装在日常开发中多次用到，其实ahooks 的封装整体比较简，但在简单内容要会才可以。