通过 localStorage 将用户选择的背景色保存至浏览器，页面刷新后自动恢复，实现颜色变更的跨会话持久化。
通过 `localstorage` 将用户选择的背景色保存至浏览器，页面刷新后自动恢复，实现颜色变更的跨会话持久化。
在 Web 开发中，仅通过 JavaScript 动态修改元素样式（如 element.style.backgroundColor）属于运行时变更，页面刷新或关闭后即丢失。若需让颜色选择“永久生效”（即在同域、同浏览器环境下持续保留），必须借助客户端存储机制。localStorage 是最简洁、兼容性良好（支持所有现代浏览器）的解决方案——它以键值对形式持久保存数据，且无过期时间。
以下是完整实现逻辑与代码：
✅ 核心步骤
- 初始化时读取：页面加载（window.addEventListener('load', ...)）时，从 localStorage 获取已保存的颜色值，并应用到目标按钮；
- 点击时写入并更新：用户点击按钮时，先获取色值输入框（）的当前值，存入 localStorage，再同步更新按钮背景色；
- 提供默认回退：若 localStorage 中无值（首次访问），使用默认颜色（如 'blue' 或原始 CSS 定义色）。
? 完整可运行示例
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Persistent Color Picker</title><style>
.contact-info-btn {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
}
</style><label for="color-picker">选择背景色：</label>
<input type="color" id="color-picker" value="#007bff"><button class="contact-info-btn" id="contact-info-btn">应用颜色</button>
<script>
const contactBtn = document.querySelector('#contact-info-btn');
const colorPicker = document.querySelector('#color-picker');
// 从 localStorage 读取颜色（支持 fallback）
function getColorFromLocalStorage() {
return localStorage.getItem('bgColor') || '#007bff';
}
// 写入颜色到 localStorage
function setColorToLocalStorage(color) {
localStorage.setItem('bgColor', color);
}
// 应用颜色到按钮（含默认值处理）
function applyBackgroundColor(element) {
element.style.backgroundColor = getColorFromLocalStorage();
}
// 页面加载时恢复颜色
window.addEventListener('load', () => {
applyBackgroundColor(contactBtn);
});
// 点击时保存并更新
contactBtn.addEventListener('click', () => {
const selectedColor = colorPicker.value;
setColorToLocalStorage(selectedColor);
contactBtn.style.backgroundColor = selectedColor;
});
</script>
⚠️ 注意事项
- 作用域限制：localStorage 数据绑定于协议+域名+端口（即同源策略），不同网站间无法共享；
- 存储大小：单个域名通常限制为 5–10 MB，颜色值极小，完全无压力；
- 隐私模式：部分浏览器在无痕窗口中禁用 localStorage，此时会降级为默认色（需业务侧容忍）；
- 样式优先级：直接设置 element.style.backgroundColor 会覆盖 CSS 中的 background-color，如需兼顾 CSS 变量或类名控制，建议改用 element.classList + CSS 自定义属性（--bg-color）方案；
- 清除风险：用户手动清空浏览器缓存或调用 localStorage.clear() 会导致数据丢失，属正常行为。
通过上述方式，你不仅实现了颜色的持久化，还构建了可扩展的数据持久化范式——类似逻辑可轻松复用于字体大小、主题模式、表单草稿等场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
