如何使用原生JavaScript跨多个会话存储用户的主题选择偏好？

现有代码的核心问题 #

• 切换逻辑未对接持久化存储，完成切换操作后没有把用户选择的主题值写入本地存储
• 页面初始化阶段没有读取已存储的主题偏好，每次打开页面都会加载硬编码的默认样式，就算之前存了值也不会生效
• 依赖document.getElementsByTagName('link')[0]选择样式表元素的方案鲁棒性极差，只要页面新增其他<link>标签（如favicon、预加载资源），索引错位就会导致切换逻辑失效

分步实现代码 #

1. 先给样式表<link>标签添加明确id，替代原来的索引选择方式：

   <link id="theme-stylesheet" rel="stylesheet" href="default.css">
   

2. 重构主题切换函数，把存储逻辑嵌入切换流程：

   // 固定存储键名，避免后续读取时拼写错误
   const THEME_STORAGE_KEY = 'user_site_theme';
   // 维护主题和样式表路径的映射关系，减少分散的硬编码
   const THEME_CSS_PATH = {
     light: 'default.css',
     dark: 'darkmode.css'
   };
   
   function setTheme() {
     const themeLink = document.getElementById('theme-stylesheet');
     const currentThemeHref = themeLink.getAttribute('href');
     // 计算下一次要切换的主题
     const targetTheme = currentThemeHref === THEME_CSS_PATH.light ? 'dark' : 'light';
     // 更新页面加载的样式表
     themeLink.setAttribute('href', THEME_CSS_PATH[targetTheme]);
     // 同步将主题选择写入localStorage，默认无过期时间，跨会话持久保留
     localStorage.setItem(THEME_STORAGE_KEY, targetTheme);
   }
   

3. 补充页面初始化的主题读取逻辑，避免页面加载时的主题闪烁问题：

   // DOM加载完成后自动应用存储的主题偏好
   document.addEventListener('DOMContentLoaded', () => {
     const savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
     // 校验存储值的合法性，避免读取到无效值导致样式加载失败
     if (savedTheme && THEME_CSS_PATH[savedTheme]) {
       document.getElementById('theme-stylesheet').setAttribute('href', THEME_CSS_PATH[savedTheme]);
     }
   });
   

常见踩坑说明 #

• 直接把存储逻辑写在原来的if判断分支里很容易出现漏写：比如只在切深色模式的时候存值，切回默认模式的时候不存，就会出现存储值和实际显示主题不一致的问题，统一在切换流程的末尾计算完目标主题再写入就能避免
• localStorage本身就支持长期持久化，不需要额外手动设置过期时间，只要用户不主动清除站点浏览数据，跨多次访问、关闭浏览器后重开都能保留之前的主题选择
• 不需要额外引入cookie方案做这个场景，cookie存储的值需要随每次请求发给服务器，对于纯前端的主题偏好场景来说冗余度太高，读写效率也不如localStorage

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