原生不保存历史记录，需手动用localstorage实现：存取标准化十六进制色值（小写六位），点击色块时赋值并派发冒泡的change事件。
HTML原生<input type="color">不保存历史记录
浏览器内置的颜色选择器（<input type="color">）每次打开都是独立弹窗，**不会自动记住你上次选过的颜色**。这不是 bug，是规范行为——HTML 标准里压根没定义“历史记录”这个能力。所以别折腾 localStorage 绑定到它身上，它连 change 事件都不在用户点取消时触发，根本抓不到“上次选了啥”。
手动实现最近使用颜色列表：用 localStorage + 自定义 UI
真要保留最近用过的颜色，得自己存、自己读、自己渲染。核心逻辑就三步：
- 每次用户确认新颜色后，把
input.value（如"#3a86ff"）插入数组头部，去重并截取前 6 个 - 用
localStorage.setItem("recentColors", JSON.stringify(arr))持久化 - 渲染时遍历数组，生成一排
<button></button>或<span></span>，设置style="background-color: #xxx;"
注意：别直接存 input 元素本身，只存字符串值；也别用 document.write 动态写，用 element.innerHTML 或 appendChild 更可控。
localStorage 存颜色的坑：大小写、补零、透明度
用户输入可能五花八门："#fff"、"#FF0000"、"rgb(255,0,0)"，但 localStorage 只认字符串，没法自动归一化。实际落地建议：
- 统一转成小写六位十六进制格式：用
color.replace(/^#/, '').padStart(6, '0').slice(0, 6)处理简写，再拼回"#xxx" - 跳过非标准格式（如
rgb()、命名色"red"），避免后续渲染失败 - 不支持 alpha 通道——
"#ff000080"是 CSS 有效值，但原生<input type="color">不返回它，也不该存
点击历史色块如何同步更新主输入框
历史色块只是按钮，点它不会自动填到 <input type="color"> 里，必须手动赋值并触发事件：
button.addEventListener('click', () => {
const color = button.dataset.color;
colorInput.value = color;
colorInput.dispatchEvent(new Event('change', { bubbles: true }));
});
重点在 dispatchEvent：否则绑定在 input 上的监听函数收不到通知，表单状态和 UI 就脱节了。别漏掉 { bubbles: true }，尤其在 Shadow DOM 或封装组件里更关键。
历史记录这事看着简单，但颜色格式归一、事件同步、存储边界（比如清空逻辑要不要加“清除历史”按钮）全得自己兜底——浏览器可不管这些。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
