咨询基于Cookie实现跨页面CSS样式持久化切换的方案

原有代码的核心问题是样式切换逻辑没有持久化存储用户选择，每次进入新页面时会强制加载默认样式。只需要通过两个环节的改造，就能实现跨页面的样式沿用：

• 样式切换时，将选中的样式文件名写入Cookie
• 页面加载早期，从Cookie读取已存储的样式值，提前设置到样式表标签上

完整改造后代码 #

<!DOCTYPE html>
<html>
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script>
// 基础Cookie读写工具
function setCookie(key, value, expireDays) {
  const date = new Date();
  date.setTime(date.getTime() + (expireDays * 24 * 60 * 60 * 1000));
  const expiresStr = "expires=" + date.toUTCString();
  // 关键配置：path设为站点根路径，确保跨任意子目录都能读取到存储值
  document.cookie = `${key}=${value};${expiresStr};path=/`;
}

function getCookie(key) {
  const targetKey = `${key}=`;
  const allCookies = decodeURIComponent(document.cookie).split(';');
  for (let cookieItem of allCookies) {
    let trimmedItem = cookieItem.trim();
    if (trimmedItem.indexOf(targetKey) === 0) {
      return trimmedItem.substring(targetKey.length);
    }
  }
  return "";
}

// 原有样式切换函数改造：切换同时持久化选择
function swapStyleSheet(sheet){
  document.getElementById('pagestyle').setAttribute('href', sheet);
  setCookie("selectedCss", sheet, 365);
}

// 页面初始化：提前读取存储的样式值，避免无样式闪烁
window.addEventListener('DOMContentLoaded', function() {
  const savedCss = getCookie("selectedCss");
  if (savedCss) {
    document.getElementById('pagestyle').setAttribute('href', savedCss);
  }
})
</script>
</head>
<body>
<h2>Javascript Change StyleSheet Without Page Reload</h2>
<button onclick="swapStyleSheet('dark.css')">Dark Style Sheet</button>
<button onclick="swapStyleSheet('blue.css')">Blue Style Sheet</button>
<button onclick="swapStyleSheet('default.css')">Default Style Sheet</button>
</body>
</html>

落地注意事项 #

• 存储Cookie时必须将path设置为/，否则站点内不同路径下的页面无法读取到已存储的样式值，会直接导致跨页面保留失效
• 初始化读取Cookie并设置样式的逻辑要放在<head>区域，不要挪到body末尾，避免页面先以默认样式渲染、再切换到用户选择的样式造成视觉闪烁
• Cookie的有效期可以根据实际需求调整，示例中设置的365天有效期足够满足长期样式偏好存储的需求
• 所有逻辑均为原生JS实现，和原有无刷新切换样式的逻辑完全兼容，不需要改动原有按钮的交互逻辑

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