如何封装 Cookie/LocalStorage/SessionStorage Hook?你明白了吗？

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

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

该 hook 使用了 js-cookie[1] 这个 npm 库。何封我认为选择它的何封理由有以下：

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

当然，何封它还有其他的何封特点，比如支持 ESM/AMD/CommonJS 方式导入等等。何封

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

本地 cookie 中已有该值，则直接取。网站模板设置的值为字符串，则直接返回。设置的值为函数，执行该函数，返回函数执行结果。返回 options 中设置的 defaultValue。const [state, setState] = useState(() => {

// 假如有值，则直接返回

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[2]中可以看到 cookie 被 disabled 的时候，也是访问不了 localStorage 的。stackoverflow[3]也有这个讨论。（奇怪的知识又增加了）

export function createUseStorageState(getStorage: () => Storage | undefined) {

function useStorageState(key: string, options?: Options) {

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(() => getStoredValue());

// 当 key 更新的时候执行

useUpdateEffect(() => {

setState(getStoredValue());

}, [key]);

最后是更新 storage 的函数：

如果是值为 undefined，则 removeItem，移除该 storage。如果为函数，则取执行后结果。否则，直接取值。// 设置 State

const updateState = (value?: T | IFuncUpdater) => {

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

参考资料

[1]js-cookie: https://www.npmjs.com/package/js-cookie[2]

issue: https://github.com/alibaba/hooks/issues/800

[3]stackoverflow: https://stackoverflow.com/questions/26550770/can-session-storage-local-storage-be-disabled-and-cookies-enabled

[4]大家都能看得懂的源码（一）ahooks 整体架构篇: https://img.ydisp.cn/news/20220630/2jl3ghlvfad : https://img.ydisp.cn/news/20220630/1xqk4inar5q 是怎么解决 React 的闭包问题的？: https://img.ydisp.cn/news/20220630/gltr0f4h1ds 是怎么解决用户多次提交问题？: https://img.ydisp.cn/news/20220630/rf3e5zyz1u3 中那些控制“时机”的hook都是怎么实现的？: https://img.ydisp.cn/news/20220630/s0swmitbdhp useEffect 支持 async...await？: https://img.ydisp.cn/news/20220630/str2xa0f15e PR: https://img.ydisp.cn/news/20220630/l2uqbuz5ej2