文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-13 21:33

关注

cookie

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

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

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

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

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 方法。

// 设置 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 方法。

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

另外,从这个issue[2]中可以看到 cookie 被 disabled 的时候,也是访问不了 localStorage 的。stackoverflow[3]也有这个讨论。(奇怪的知识又增加了)

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);
}
// 代码在后面讲解
}
// 自定义序列化方法
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 的函数:

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

参考资料

[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://juejin.cn/post/7105396478268407815

[5]如何使用插件化机制优雅的封装你的请求hook : https://juejin.cn/post/7105733829972721677

[6]ahooks 是怎么解决 React 的闭包问题的?: https://juejin.cn/post/7106061970184339464

[7]ahooks 是怎么解决用户多次提交问题?: https://juejin.cn/post/7106461530232717326

[8]ahooks 中那些控制“时机”的hook都是怎么实现的?: https://juejin.cn/post/7107189225509879838

[9]如何让 useEffect 支持 async...await?: https://juejin.cn/post/7108675095958126629

[10]如何让定时器在页面最小化的时候不执行?: https://juejin.cn/post/7109399243202232357

[11]记录第一次给开源项目提 PR: https://juejin.cn/post/7110144695098933284​

来源:前端杂货铺内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯