用户偏好或设置应当存储在localStorage还是cookies中？

1. 登录态跨设备同步场景的存储方案 #

• 这种场景下的行业标准做法是将暗黑模式设置作为用户个人配置项存储在后端数据库，同时可将配置值存入cookies：
  • 服务端可以直接读取cookies中的配置值，不管是普通页面请求还是SSR渲染都能直接返回对应主题的页面内容
  • 登录时从后端拉取最新配置覆盖本地值，修改配置时同步调用接口更新后端存储，就能实现多设备设置同步

2. 无登录本地生效场景的存储方案 #

• 完全可以直接使用localStorage存储，这也是这类场景最通用的实践：
  • localStorage属于浏览器持久化存储，只要用户不主动清理浏览器缓存，设置会长期保留
  • 对比sessionStorage（关闭页面即失效）、IndexedDB（更适合大量复杂数据存储），localStorage足够满足单个配置项的存储需求，实现成本也最低

延伸问题1：相关参考资料推荐 #

你可以直接搜索官方权威内容参考，包括MDN Web Docs的浏览器存储相关指南、你所使用的前端框架官方文档中的暗黑模式实现章节，都是经过社区大量实践验证的可靠内容。

延伸问题2：SSR架构下使用localStorage存储的闪屏问题 #

• 确实会出现你描述的问题，这是SSR架构搭配localStorage存储主题设置的典型缺陷：
  • SSR渲染逻辑在服务端执行，无法读取仅存在于用户浏览器端的localStorage值，只能默认返回固定主题的HTML内容
  • 要等到前端hydration流程完成，JS执行后读取到localStorage里的主题值完成切换，才会显示正确的主题，中间就会出现短时间的错误主题展示，也就是常说的主题闪屏
  • 对应解决方案有两个常用方向：
    1. 改用cookies存储主题设置，服务端渲染时直接读取cookies值返回对应主题的HTML，从根源避免闪屏
    2. 在首屏HTML的<head>标签中插入一段同步执行的内联JS脚本，优先读取localStorage的主题值并给html根节点添加对应主题类名，这段脚本会早于页面内容渲染执行，也能避免闪屏

内容的提问来源于stack exchange，提问作者Joji