category
tags
type
status
slug
date
summary
icon
password
文章来源说明
🤔前言
我在我的Reactjs项目中使用了Nextjs。现在需求是在客户端的cookie中缓存用户选择的主题，用户打开页面时展示该主题的界面。用户关闭浏览器后，下次打开页面主题又回到默认。
而在nextjs中，服务器端通过调用
getInitialProps() 以进行第一页加载。我的其它页面渲染是在服务端getStaticProps()完成的，故而无法获取客户端的 localstorage 、以及cookie，也就不便于做一些基于浏览器缓存的操作。让人头大。可使用的API
1.ReactJS获取cookie
2.ReactJS获取LocalStorage
一种方案可能的方案
直接在服务端获取客户端请求中的Cookie：我们可以在网站的第一页访问入口处获取，也就是
_document.js中的getInitialProps中获取：然而这里的 initialProps.cookies没有办法直接传给别的组件。一种可行方案是作为URL的传参，放在全局路由中，这样就可以在其他组件中获取到参数。而这样会破坏页面地址的美观性，最后还是采取了如下另一种方案。
📝由前端进行Cookie读取和渲染
利用useEffect()函数，由客户端在页面渲染生效时，进行默认主题的读取和切换：将cookie中保存的主题信息，添加到相应DOM的classList当中，例如：
document.getElementById('wrapper').classList.add('theme') 这里我创建了一个
Provider，用useState进行变量的绑定，便于其他模块调用useTheme勾子来实现全局主题的手动切换。theme.js文件：
DarkModeButton.js
实现点击按钮切换主题
BaseLayout.js
🤗总结归纳
服务端解决不了，那就客户端解决。相关代码可以在我的Github项目中查看。
NotionNext
tangly1024 • Updated Apr 22, 2024
行动建议
我在使用NextJS+NotionAPI开发我的独立博客站，欢迎您在底部评论区留言，一起交流~
参考
GithubIs sues: https://github.com/vercel/next.js/issues/2252
