如何用Local Storage保存颜色选择器的用户选择？

你的代码问题出在LocalStorage的使用逻辑错误，以及缺少页面加载时的状态恢复逻辑：

核心问题点 #

• 存储时没有保存实际选中的颜色值，反而存了CSS变量名，完全无意义
• 页面刷新后没有从LocalStorage读取之前的选择，无法恢复状态
• 调用localStorage.getItem后没有对返回值做任何处理，等于无效代码

修复后的完整代码 #

JavaScript部分 #

// 页面加载时恢复之前的选择
document.addEventListener('DOMContentLoaded', () => {
  const savedColor = localStorage.getItem('selectedPrimaryColor');
  const root = document.documentElement;
  
  if (savedColor) {
    // 设置CSS变量
    root.style.setProperty('--primary-color', savedColor);
    // 标记对应的颜色选项为选中状态
    const targetOption = document.querySelector(`.color-option[data-color="${savedColor}"]`);
    if (targetOption) {
      document.querySelectorAll('.color-option').forEach(opt => opt.classList.remove('is-selected'));
      targetOption.classList.add('is-selected');
    }
  }
});

// 颜色选择点击事件
document.addEventListener('click', (e) => {
  const colorOption = e.target.closest('.color-option');
  if (!colorOption) return;
  
  // 移除所有选中状态
  document.querySelectorAll('.color-option').forEach(opt => opt.classList.remove('is-selected'));
  colorOption.classList.add('is-selected');
  
  const color = colorOption.dataset.color;
  const root = document.documentElement;
  
  // 设置CSS变量
  root.style.setProperty('--primary-color', color);
  // 保存选中的颜色到LocalStorage
  localStorage.setItem('selectedPrimaryColor', color);
});

CSS部分（无需修改） #

body {
  background-color: var(--primary-color);
}

.color-option {
  height:35px;
  width: 35px;
  list-style: none;
  border-radius: 4px;
  margin: 7px;
  transition: .2s;
  cursor: pointer;
  &:hover {
    box-shadow: 0 0 0 5px rgba(0,0,0,.2);
  }
  &.is-selected {
    transform: scale(1.1);
    box-shadow: 0 0 0 5px rgba(0,0,0,.2);
  }
}

.color-option:nth-child(1) { background: #3485fd }
.color-option:nth-child(2) { background: #002C5F }
.color-option:nth-child(3) { background: #00AFD8 }
.color-option:nth-child(4) { background: #5B1F69 }
.color-option:nth-child(5) { background: #FF5F1F }
.color-option:nth-child(6) { background: #ff00e2 }

HTML部分（无需修改） #

<body>
<ul class="color-grid">
    <li class="color-option is-selected" data-color="#3485fd"></li>
    <li class="color-option" data-color="#002C5F"></li>
    <li class="color-option" data-color="#00AFD8"></li>
    <li class="color-option" data-color="#5B1F69"></li>
    <li class="color-option" data-color="#FF5F1F"></li>
    <li class="color-option" data-color="#ff00e2"></li>
</ul>
</body>

修复说明 #

1. 添加DOM加载完成事件：页面加载时先检查LocalStorage里是否有保存的颜色，有就直接设置CSS变量，并把对应的颜色选项标记为选中
2. 修正LocalStorage存储逻辑：点击颜色时，把实际选中的颜色值（color变量）存入LocalStorage，键名用selectedPrimaryColor更清晰
3. 移除无用代码：删掉原代码中无意义的localStorage.getItem("--primary-color");语句

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