如何在页面刷新时保存用户操作进度（如主题设置）？

要实现页面刷新后保留用户设置的功能，前端最常用的方案就是利用浏览器的localStorage存储状态，下面是具体的实现步骤和代码示例：

1. 切换模式时存储状态 #

当用户触发暗黑模式切换（比如点击按钮），把当前的模式状态存入localStorage，数据会持久保存在浏览器中，除非用户手动清除缓存。

// 假设切换按钮的id是toggleDarkMode
document.getElementById('toggleDarkMode').addEventListener('click', () => {
  const body = document.body;
  // 切换当前模式
  body.classList.toggle('dark-mode');
  // 把当前模式状态存入localStorage
  const isDarkMode = body.classList.contains('dark-mode');
  localStorage.setItem('userDarkMode', isDarkMode.toString());
});

2. 页面加载时恢复状态 #

页面初始化（包括刷新后），先从localStorage读取之前保存的状态，再应用对应的模式：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  const savedMode = localStorage.getItem('userDarkMode');
  const body = document.body;
  // 如果有保存的状态就应用；无保存状态则用默认浅色模式
  if (savedMode === 'true') {
    body.classList.add('dark-mode');
  }
});

3. 配套CSS样式 #

需要先定义好暗黑模式的样式：

/* 默认浅色模式 */
body {
  background-color: #ffffff;
  color: #333333;
  transition: background-color 0.3s, color 0.3s;
}

/* 暗黑模式 */
body.dark-mode {
  background-color: #1a1a1a;
  color: #f0f0f0;
}

补充说明 #

• localStorage存储的数据为字符串类型，因此需要将布尔值转成字符串存储，读取时再做判断
• 该状态会在同一域名下的所有页面生效
• 若要支持更复杂的用户进度（比如表单输入、步骤流程），同样可以用localStorage存储对应数据，加载时恢复

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