ahooks封装cookie localStorage sessionStorage方法

更新时间：2022年07月12日 09:39:30 作者：Gopal

这篇文章主要为大家介绍了ahooks封装cookie localStorage sessionStorage的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

本文是深入浅出 ahooks 源码系列文章的第九篇，这个系列的目标主要有以下几点：

加深对 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 的封装整体比较简，以上就是ahooks封装cookie localStorage sessionStorage方法的详细内容，更多关于ahooks封装cookie localStorage sessionStorage的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

浅谈React之状态(State)
这篇文章主要介绍了浅谈React之状态(State)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
React-vscode使用jsx语法的问题及解决方法
很多朋友在安装插件ES7 React/Redux/GraphQL/React-Native snippets还是不能完全支持jsx语法，纠结是什么原因呢，该如何处理呢，下面小编给大家分享本文帮助大家解决React-vscode使用jsx语法问题，感兴趣的朋友一起看看吧
2021-06-06
react如何使用mobx6动态加载数据
MobX是一个强大而简单的状态管理工具,它可以帮助我们更好地组织和管理React应用程序中的数据流,本文给大家介绍react如何使用mobx6动态加载数据,感兴趣的朋友跟随小编一起看看吧
2024-02-02
react 实现图片正在加载中加载完成加载失败三个阶段的原理解析
这篇文章主要介绍了react 实现图片正在加载中加载完成加载失败三个阶段的,通过使用loading的图片来占位，具体原理解析及实现代码跟随小编一起通过本文学习吧
2021-05-05
React Native全面屏状态栏和底部导航栏适配教程详细讲解
最近在写 React Native 项目，调试应用时发现顶部状态栏和底部全面屏手势指示条区域不是透明的，看起来很难受。研究了一下这个问题，现在总结一下解决方案，这篇文章主要介绍了React Native全面屏状态栏和底部导航栏适配教程
2023-01-01
React处理复杂图片样式的方法详解
这篇文章主要为大家详细介绍了React处理复杂图片样式的方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-04-04
在React中集成第三方库和插件方式
本文详细介绍了如何在React项目中高效集成第三方库和插件,包括选择合适的库、封装为React组件、按需加载、避免直接操作DOM、处理库的更新和卸载、样式处理与主题定制、性能优化以及调试与维护等方面,通过遵循这些最佳实践,可以确保集成过程高效且优雅
2025-03-03
浅谈React Event实现原理
这篇文章主要介绍了浅谈React Event实现原理,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
关于useEffect的第二个参数解读
这篇文章主要介绍了关于useEffect的第二个参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
解决react中label标签for报错问题
这篇文章主要介绍了react中label标签for报错问题，解决办法就是react中label标签没有for属性，用htmlFor代替for属性,感兴趣的朋友跟随小编一起看看吧
2022-02-02