今天来看看 ahooks 是怎么封装 cookie/localStorage/sessionStorage 的。,ahooks 封装了 useCookieState，一个可以将状态存储在 Cookie 中的 Hook 。,该 hook 使用了 js-cookie[1] 这个 npm 库。我认为选择它的理由有以下：,当然，它还有其他的特点，比如支持 ESM/AMD/CommonJS 方式导入等等。,封装的代码并不复杂，先看默认值的设置，其优先级如下：,再看设置 cookie 的逻辑 —— updateState 方法。,ahooks 封装了 useLocalStorageState 和 useSessionStorageState。将状态存储在 localStorage 和 sessionStorage 中的 Hook 。,两者的使用方法是一样的，因为官方都是用的同一个方法去封装的。我们以 useLocalStorageState 为例。,可以看到 useLocalStorageState 其实是调用 createUseStorageState 方法返回的结果。该方法的入参会判断是否为浏览器环境，以决定是否使用 localStorage，原因在于 ahooks 需要支持服务端渲染。,我们重点关注一下，createUseStorageState 方法。,这里返回的 storage 可以看到其实可能是 undefined 的，后面都会有 catch 的处理。,另外，从这个issue[2]中可以看到 cookie 被 disabled 的时候，也是访问不了 localStorage 的。stackoverflow[3]也有这个讨论。（奇怪的知识又增加了）,最后是更新 storage 的函数：,对 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
© 版权声明
文章版权归作者所有，未经允许请勿转载。
">