首页 > 编程语言 >大家都能看得懂的源码 - 如何封装 cookie/localStorage/sessionStorage hook?

大家都能看得懂的源码 - 如何封装 cookie/localStorage/sessionStorage hook?

时间:2022-08-19 13:12:46浏览次数:94  
标签:const undefined sessionStorage value hook 源码 cookie return options

本文是深入浅出 ahooks 源码系列文章的第九篇,该系列已整理成文档-地址。觉得还不错,给个 star 支持一下哈,Thanks。

今天来看看 ahooks 是怎么封装 cookie/localStorage/sessionStorage 的。

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 的封装整体比较简单,大家可以参考借鉴。

本文已收录到个人博客中,欢迎关注~

标签:const,undefined,sessionStorage,value,hook,源码,cookie,return,options
From: https://www.cnblogs.com/gopal/p/16601656.html

相关文章

  • Function Interposition in Linux(hook)
    你是否想多改变库代码的工作方式,不替换整个库或者重新编译它。例如,你想包裹一层malloc和free函数来记录分配的日志,为了查找内存泄露。你可以重写那段使用了malloc/free的代......
  • React Hooks
    Hooks概念Hook是一个特殊的函数,它可以让你“钩入”React的特性。Hook是React16.8(当前版本18,项目使用17)的新增特性,它可以让你在不编写class的情况下使用state以......
  • ForkJoinPool源码分析之一(外部提交及worker执行过程)
    在前文中介绍了如何使用ForkJoinPool和ForkJoin的一些基本原理。现在继续来分析ForkJoin,原本计划从源码开始分析。但是ForkJoinPool的源码太过复杂。后续得分好几部分来讲......
  • Spring源码环境搭建
    Spring源码在github上,地址是https://github.com/spring-projects/spring-framework/,选择5.3.x版本,直接从github上克隆项目网速很慢,所以首先将github上的Spring项目导入gite......
  • 【CV源码项目实现】darknet中network的实现过程
     darknet的网络结构使用network结构体进行保存,network的构建过程主要包括以下几个函数:load_network(src/networks.c)----->parse_network_cfg(src/parser.c) --->ma......
  • 【CV项目源码实现】Floating point exception (core dumped)
    前言cmd./darknetdetectordemocfg/tfl.datacfg/yolov3-tiny-tfl.cfgbackup/yolov3-tiny-tfl_500000.weightsdata/tfl.avierrorFloatingpointexception(cor......
  • 关系不明组件间的通信PubSub(发布订阅的使用步骤+ps源码)
    1、安装  npmipubsub-js2、在main.js中引入并加入到全局  3、在组件中发布:使用publish(自定义名称,传参)  4、在组件中接收:在mounted中使用subscribe,在befor......
  • spring 源码搭建
    这是不坚持写博客写的第7篇博客,搭建spring5源码运行环境idea版本:   第一步:拉取5.1.x版本代码到本地,官方的,中文注释的都可以 第二步:因为spring源码使用gradle......
  • 直播网站源码,Vue获取URL图片的宽高
    直播网站源码,Vue获取URL图片的宽高方法1:函数类型 datadragEnd(){//创建实例对象varimg=newImage();//图片地址img.src="http://celiang.oss-cn-hangzhou.aliy......
  • cookie、localStorage和sessionStorage的区别
    都是一种存储机制 cookielocalStoragesessionStorage大小4kb10Mb(同步执行,太大会影响渲染进度)5Mb兼容H4/H5H5H5访问任何窗口任何窗口同一窗口......