如何修改网站背景色并将设置保存到Local Storage？

核心思路 #

• 用localStorage.setItem()持久化保存用户选择的背景色
• 页面初始化时通过localStorage.getItem()读取保存的值，自动恢复背景色
• 优化原代码的重复逻辑，减少冗余代码量

修改后的完整代码 #

HTML（微调，给按钮添加颜色标识属性） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class='button-wrapper'>
  <button class='change-color' id='green-and-white' data-color="green"></button>
  <button class='change-color' id='red-and-yellow' data-color="red"></button>
  <button class='change-color' id='blue-and-pink' data-color="blue"></button>
  <button class='change-color' id='yellow-And-Pink' data-color="yellow"></button>
</div>

CSS（保留原样式不变） #

/* -- change color wpear.com -- */

.button-wrapper {
  position: fixed;
  left: 0;
  display: grid;
  top: 40%;
  margin: 0;
}

.change-color {
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: none;
}

#red-and-yellow {
  background: red;
}

#green-and-white {
  background: green;
}

#blue-and-pink {
  background: blue;
}

#yellow-And-Pink {
  background: yellow;
}

JavaScript（关键修改部分） #

$(document).ready(function() {
  const resultPlaceholder = $('body');
  const STORAGE_KEY = 'custom_bg_color';

  // 页面加载时自动恢复之前保存的背景色
  const savedColor = localStorage.getItem(STORAGE_KEY);
  if (savedColor) {
    resultPlaceholder.css('background', savedColor);
  }

  // 统一处理所有颜色按钮的点击事件
  $('.change-color').click(function() {
    const selectedColor = $(this).data('color');
    // 设置当前背景色
    resultPlaceholder.css('background', selectedColor);
    // 将选择的颜色存入LocalStorage
    localStorage.setItem(STORAGE_KEY, selectedColor);
  });
})

关键代码说明 #

• STORAGE_KEY：定义统一的存储键名，避免拼写错误，方便后续维护
• 页面初始化阶段先检查LocalStorage中是否有用户之前保存的颜色，存在则直接应用
• 给每个按钮添加data-color属性绑定对应颜色值，不用为每个按钮单独写重复的点击逻辑
• 点击按钮时，先设置页面背景色，再将颜色值存入LocalStorage，实现持久化保存

额外提示 #

• LocalStorage的数据会一直保存在用户浏览器中，除非用户手动清除缓存或调用localStorage.removeItem(STORAGE_KEY)主动删除
• 原代码中blueAndPink的背景色设置存在语法错误（多了一个右括号blue)），已在修改后的代码中修正

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