点击颜色选择框时localStorage仅存首个选中值的JS问题

问题根源 #

你遇到的“仅首次选中的颜色能存入localStorage”的问题，基本是因为事件绑定只作用在了第一个颜色选择框上。比如用document.querySelector('input[type="color"]')只会获取页面中第一个匹配的颜色输入框，后续的颜色框没有被绑定点击事件，自然点击后不会触发存储逻辑。

修复方案 #

方案1：事件委托（更灵活） #

借助事件冒泡机制，给所有颜色框的父容器绑定一次事件，就能处理所有子颜色框的点击操作，哪怕后续动态新增颜色框也能生效：

// 替换成你实际的父容器选择器，比如.color-boxes
document.querySelector('.color-boxes').addEventListener('click', function(e) {
  // 确认点击的是颜色选择框
  if (e.target.tagName === 'INPUT' && e.target.type === 'color') {
    const colorVal = e.target.value;
    localStorage.setItem('selectedColor', colorVal);
    // 可选：打印日志验证
    console.log('存储的颜色：', colorVal);
  }
});

方案2：遍历绑定所有颜色框 #

如果页面加载时所有颜色选择框都已存在，也可以直接遍历所有元素逐个绑定事件：

const colorPickers = document.querySelectorAll('input[type="color"]');
colorPickers.forEach(picker => {
  picker.addEventListener('click', function() {
    localStorage.setItem('selectedColor', this.value);
    console.log('存储的颜色：', this.value);
  });
});

验证方法 #

点击任意颜色框后，打开浏览器开发者工具（F12），在控制台输入localStorage.getItem('selectedColor')，回车后查看返回值是否为当前选中的颜色，以此确认存储是否正常。

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