如何在网站页面跳转时保留用户选择的CSS样式表？

步骤1：修改主题切换函数，保存选择到localStorage #

把你的JavaScript函数改成这样，切换样式的同时把用户选择的主题存到浏览器本地存储里：

function swapStyleSheet(sheet) {
  const styleElement = document.getElementById('pagestyle');
  styleElement.setAttribute('href', sheet);
  // 将选中的主题保存到localStorage
  localStorage.setItem('selectedTheme', sheet);
}

步骤2：添加页面初始化逻辑，读取保存的主题 #

在同一个JavaScript代码块里，新增初始化函数，并让页面加载时自动执行：

function initTheme() {
  // 读取保存的主题，没有保存过就用默认浅色样式
  const savedTheme = localStorage.getItem('selectedTheme') || 'stylesheetlight.css';
  const styleElement = document.getElementById('pagestyle');
  styleElement.setAttribute('href', savedTheme);
}

// 等页面DOM加载完成后执行主题初始化
window.addEventListener('DOMContentLoaded', initTheme);

步骤3：确保所有页面都能用到这段代码 #

最方便的做法是把上面所有JavaScript代码放到一个单独的文件（比如theme.js），然后在每个HTML页面的底部引入这个文件：

<script src="theme.js"></script>

关键说明 #

• localStorage是浏览器自带的本地存储工具，数据会一直保存在用户浏览器里，刷新、跳转页面都不会丢失。
• localStorage.setItem负责存数据，localStorage.getItem负责取数据，这里用selectedTheme作为存储的键名。
• DOMContentLoaded事件确保页面的元素都加载完成后再执行初始化，避免找不到pagestyle标签的问题。
• 要保证每个页面的样式表link标签都带有id="pagestyle"，和你现在的代码一致。

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