如何使用JavaScript的localStorage存储背景色修改配置并支持重置默认值

核心思路 #

• 预先定义所有可修改元素类名的默认颜色配置，作为重置功能的基准值
• 页面初始化时优先读取localStorage中存储的用户自定义配置，无配置时自动加载默认值
• 修改颜色时同步更新页面样式和localStorage存储内容
• 重置功能直接清除存储的自定义配置，回退到默认值并重绘页面样式

完整代码实现 #

JavaScript 代码 #

// 预先定义各元素类对应的默认颜色，可根据实际需求修改
const DEFAULT_COLOR_CONFIG = {
  'card-bg': '#ffffff',
  'body-bg': '#f8f9fa',
  'nav-bg': '#e9ecef'
}

// 页面加载完成后初始化样式
window.onload = function() {
  initBgColors()
}

// 初始化背景色
function initBgColors() {
  // 读取本地存储的配置，没有则用默认配置
  const savedConfig = localStorage.getItem('customBgColorConfig')
  const colorConfig = savedConfig ? JSON.parse(savedConfig) : {...DEFAULT_COLOR_CONFIG}
  
  // 遍历配置给所有对应类的元素设置背景色
  Object.keys(colorConfig).forEach(className => {
    setClassBgColor(className, colorConfig[className])
  })
}

// 给指定类的所有元素设置背景色
function setClassBgColor(className, color) {
  const elements = document.getElementsByClassName(className)
  for (let i = 0; i < elements.length; i++) {
    elements[i].style.background = color
  }
}

// 修改指定类的背景色，同步更新本地存储
function changeBgColor(className, color) {
  // 先更新页面样式
  setClassBgColor(className, color)
  
  // 读取现有配置，更新后存回localStorage
  const savedConfig = localStorage.getItem('customBgColorConfig')
  const colorConfig = savedConfig ? JSON.parse(savedConfig) : {...DEFAULT_COLOR_CONFIG}
  colorConfig[className] = color
  localStorage.setItem('customBgColorConfig', JSON.stringify(colorConfig))
}

// 重置所有颜色为默认值
function resetAllBgColors() {
  // 清除本地存储的自定义配置
  localStorage.removeItem('customBgColorConfig')
  // 重新加载默认配置
  initBgColors()
}

HTML 代码示例 #

<!-- 不同类的演示元素 -->
<div class="body-bg" style="padding: 20px;">
  <nav class="nav-bg" style="padding: 15px; margin-bottom: 20px;">导航栏区域</nav>
  <div class="card-bg" style="padding: 15px; margin-bottom: 15px;">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit reiciendis asperiores incidunt accusamus mollitia eligendi culpa ea iure harum, repellendus animi natus odio unde explicabo, perspiciatis consectetur laudantium eius. Nisi!
  </div>
  <div class="card-bg" style="padding: 15px; margin-bottom: 20px;">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit reiciendis asperiores incidunt accusamus mollitia eligendi culpa ea iure harum, repellendus animi natus odio unde explicabo, perspiciatis consectetur laudantium eius. Nisi!
  </div>

  <!-- 颜色选择区域，实际可替换为你的300色模态框逻辑 -->
  <h4>修改卡片背景色</h4>
  <div style="background-color: #ffebee; padding: 10px; margin-bottom: 8px;" class="text-dark">
    <p>Red 50 <span><a onclick="changeBgColor('card-bg', '#FFEBEE');">#FFEBEE</a></span></p>
  </div>
  <div style="background-color: #ffcdd2; padding: 10px; margin-bottom: 8px;" class="text-dark">
    <p>Red 100 <span><a onclick="changeBgColor('card-bg', '#FFCDD2');">#FFCDD2</a></span></p>
  </div>
  <div style="background-color: #ef9a9a; padding: 10px; margin-bottom: 20px;" class="text-dark">
    <p>Red 200 <span><a onclick="changeBgColor('card-bg', '#EF9A9A');">#EF9A9A</a></span></p>
  </div>

  <!-- 重置按钮 -->
  <button onclick="resetAllBgColors()" style="padding: 8px 16px; cursor: pointer;">重置所有颜色为默认值</button>
</div>

功能说明 #

• 你可以自行扩展DEFAULT_COLOR_CONFIG里的类名和对应默认值，适配你所有需要修改的元素类型
• 颜色选择逻辑不需要修改原有模态框的代码，只需要把原来的点击事件里的changeBgColor调用加上第一个参数（对应要修改的类名）即可
• 所有配置会自动存在用户本地localStorage中，清除浏览器缓存之前都会永久保留

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