如何使用JavaScript localStorage保存背景颜色，刷新后不重置？

核心思路 #

要实现刷新页面后背景色设置不重置，需完成两个关键操作：

• 点击按钮时，将选中的颜色存入localStorage（浏览器本地持久化存储，数据不会随页面刷新丢失）
• 页面加载完成后，从localStorage读取保存的颜色，恢复背景色设置

修改后的完整代码 #

<!-- 示例HTML：可按需添加更多颜色按钮，通过data-color指定对应颜色 -->
<button class="color-btn" data-color="red">红色</button>
<button class="color-btn" data-color="blue">蓝色</button>
<button class="color-btn" data-color="#f5f5dc">米色</button>

<script>
// 页面加载时恢复之前保存的背景色
window.addEventListener('DOMContentLoaded', () => {
  const savedColor = localStorage.getItem('bgColor');
  if (savedColor) {
    document.body.style.backgroundColor = savedColor;
  }
});

// 给所有颜色按钮绑定点击事件
const colorBtns = document.querySelectorAll('.color-btn');
colorBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 从按钮的data-color属性获取目标颜色
    const targetColor = btn.dataset.color;
    if (!targetColor) return;

    // 设置页面背景色
    document.body.style.backgroundColor = targetColor;
    // 将颜色保存到localStorage
    localStorage.setItem('bgColor', targetColor);
  });
});
</script>

代码说明 #

1. 持久化存储逻辑：

   • localStorage.setItem('bgColor', targetColor)：以bgColor为键名，将选中的颜色存入本地存储，除非用户手动清除浏览器缓存，否则数据会一直保留。
   • localStorage.getItem('bgColor')：读取之前保存的颜色值，用于页面加载时恢复背景色。

2. 页面加载恢复逻辑：

   • 监听DOMContentLoaded事件，确保页面DOM元素完全加载后再执行恢复操作，避免出现找不到body元素的问题。

3. 通用按钮绑定：

   • 使用forEach遍历所有.color-btn按钮，批量绑定点击事件，无需单独处理单个按钮，扩展性更强。
   • 通过data-color属性给按钮指定对应颜色，新增颜色按钮时只需添加HTML元素即可，无需修改JS代码。

适配你原有代码的简化版本 #

如果不想使用data-color属性，仅针对现有单个红色按钮修改，可使用以下代码：

// 页面加载恢复颜色
window.addEventListener('DOMContentLoaded', () => {
  const savedColor = localStorage.getItem('bgColor');
  if (savedColor) {
    document.body.style.backgroundColor = savedColor;
  }
});

const colors = document.querySelectorAll('.color-btn');
colors[0].addEventListener('click', () => {
  const color = 'red';
  document.body.style.backgroundColor = color;
  localStorage.setItem('bgColor', color);
});

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