引言
本文是深入浅出 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的资料请关注阿兔在线工具其它相关文章!