如何实现浏览器刷新后仍保留网站选中的配色方案

嘿，这个问题我碰到过好多次啦，用浏览器自带的localStorage就能完美解决！它能把用户选的配色存在本地，就算刷新页面也不会丢。我给你捋捋具体怎么弄：

1. 把用户选择的配色存起来 #

当用户点选配色选项时，除了切换网站外观，别忘了把选中的配色值存到localStorage里。举个例子，假设你切换配色的函数是这样的：

function changeColor(color) {
  // 这里是你原本的切换逻辑，比如修改body的类名或者CSS变量
  document.body.className = color;
  // 新增：把选择的颜色存入本地存储
  localStorage.setItem('selectedColor', color);
}

2. 页面加载时自动读取并应用 #

在页面刚加载完成的时候，检查一下localStorage里有没有保存的配色，如果有就直接用上：

// 监听页面加载完成事件
document.addEventListener('DOMContentLoaded', function() {
  // 读取之前保存的配色
  const savedColor = localStorage.getItem('selectedColor');
  // 如果有保存的值，就应用到网站上
  if (savedColor) {
    document.body.className = savedColor;
  }
});

3. 结合你的侧边栏代码调整 #

如果你的配色选项是在侧边栏里，把存储逻辑加到对应的点击事件里就行。比如侧边栏里的颜色按钮：

// 假设你的颜色选项都有.color-option类和data-color属性
document.querySelectorAll('.color-option').forEach(option => {
  option.addEventListener('click', function() {
    const chosenColor = this.dataset.color;
    // 应用选中的配色
    document.body.className = chosenColor;
    // 保存到本地存储
    localStorage.setItem('selectedColor', chosenColor);
    // 顺便关闭侧边栏（用你已有的closeNav函数）
    closeNav();
  });
});

额外小提醒 #

• localStorage里的数据会一直留在用户浏览器里，除非用户手动清缓存或者你用代码删除。如果想加个“恢复默认”按钮，点击时执行localStorage.removeItem('selectedColor')再把样式改回默认就好。
• 如果你的配色是用CSS自定义属性（比如--main-color）实现的，那存储和读取的时候就改成设置document.documentElement.style.setProperty('--main-color', savedColor)就行，逻辑是一样的。

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