如何让HTML按钮的颜色修改在页面刷新后持久化？

我实现了一个颜色选择器功能，选择颜色后点击id为contact-info-btn的按钮，可将其背景色改为所选颜色，但修改仅在当前会话有效，页面刷新后会恢复原颜色。请问如何实现该颜色修改的持久化？

原实现代码 #

JavaScript 代码 #

document.querySelector('#contact-info-btn').addEventListener('click', (event) => {
    event.target.style.backgroundColor = document.querySelector("#color-picker").value
});

HTML 代码 #

<label for="color-picker">Color:</label>
<input type="color" id="color-picker" />
<form method="post" class="homepg-form" id="homepg-form" >
...
<button class="contact-info-btn" id="contact-info-btn" type="button" >İletişim bilgileri</button>

持久化实现方案 #

要实现颜色修改的持久化，可利用浏览器的localStorage API——它能将数据持久存储在用户浏览器中，即使页面刷新或重新打开也不会丢失。具体需做两处修改：

• 点击按钮时，将选中的颜色值存入localStorage
• 页面加载完成后，从localStorage读取保存的颜色值，并设置给按钮

修改后的完整代码 #

JavaScript 代码

// 页面加载时读取保存的颜色并设置
document.addEventListener('DOMContentLoaded', () => {
    const savedColor = localStorage.getItem('btnBgColor');
    const btn = document.querySelector('#contact-info-btn');
    if (savedColor) {
        btn.style.backgroundColor = savedColor;
        // 同步颜色选择器为保存的颜色，提升体验
        document.querySelector("#color-picker").value = savedColor;
    }
});

// 点击按钮时保存颜色并设置背景
document.querySelector('#contact-info-btn').addEventListener('click', (event) => {
    const selectedColor = document.querySelector("#color-picker").value;
    event.target.style.backgroundColor = selectedColor;
    // 将颜色存入localStorage
    localStorage.setItem('btnBgColor', selectedColor);
});

HTML 代码（无需修改）

<label for="color-picker">Color:</label>
<input type="color" id="color-picker" />
<form method="post" class="homepg-form" id="homepg-form" >
...
<button class="contact-info-btn" id="contact-info-btn" type="button" >İletişim bilgileri</button>

关键说明 #

• localStorage.getItem('key')：读取存储的键值对数据
• localStorage.setItem('key', value)：存储键值对数据
• DOMContentLoaded事件确保页面DOM加载完成后再执行操作，避免找不到元素的问题
• 同步颜色选择器的值是为了让页面刷新后，选择器显示之前保存的颜色，保持操作连贯性

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