当使用本地存储来保存复选框的状态时,可能会遇到一些错误值。以下是一种解决方法,包含代码示例:
// 保存复选框的状态
function saveCheckboxState(checkboxId, state) {
localStorage.setItem(checkboxId, state);
}
// 获取复选框的状态
function getCheckboxState(checkboxId) {
return localStorage.getItem(checkboxId);
}
window.onload = function() {
// 获取复选框元素
var checkbox = document.getElementById('checkbox');
// 获取保存的复选框状态
var savedState = getCheckboxState('checkboxState');
// 检查保存的状态是否有效
if (savedState !== null && (savedState === 'checked' || savedState === 'unchecked')) {
checkbox.checked = savedState === 'checked';
}
}
// 复选框状态改变时的事件处理函数
function handleCheckboxChange() {
// 获取复选框元素
var checkbox = document.getElementById('checkbox');
// 保存复选框的状态
saveCheckboxState('checkboxState', checkbox.checked ? 'checked' : 'unchecked');
}
// 为复选框添加事件监听器
checkbox.addEventListener('change', handleCheckboxChange);
这样,无论页面刷新还是关闭再打开,复选框的状态都会被正确地恢复。