如何编写刷新页面后可保存状态的合规Checkbox

直接用下面的完整代码就能实现勾选状态刷新不丢失的功能，每部分我给你简单说明：

完整代码 #

<!DOCTYPE html>
<html>
<head>
    <title>我的购物清单</title>
    <!-- 保留你原来的样式类，也可以自定义样式 -->
    <style>
        .form-control {
            font-size: 18px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <label class="form-control">
        <input type="checkbox" name="purchased" id="purchasedCheckbox" />
        Purchased
    </label>

    <script>
        // 获取页面上的checkbox元素
        const checkbox = document.getElementById('purchasedCheckbox');

        // 页面加载时，读取浏览器本地存储里的历史状态
        const savedState = localStorage.getItem('purchasedState');
        if (savedState === 'true') {
            checkbox.checked = true;
        }

        // 监听勾选变化，实时把状态存到本地存储
        checkbox.addEventListener('change', function() {
            localStorage.setItem('purchasedState', this.checked);
        });
    </script>
</body>
</html>

关键部分说明 #

• 给checkbox加id="purchasedCheckbox"：让JavaScript能精准定位到这个元素
• localStorage.getItem('purchasedState')：页面打开时，读取浏览器里保存的历史勾选状态
• checkbox.addEventListener('change', ...)：每次勾选/取消勾选时，把当前状态存入浏览器本地存储，刷新页面就能恢复状态

你把这段代码复制成.html文件打开就能用，刷新页面后勾选状态不会重置。

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