javascript - 使用 vanilla JS 在页面重新加载时保持复选框选中或取消选中

Question

我无法理解这个问题。我有这个复选框:

<input id="copy" name="varcopy" onkeyup="saveValue(this)" tabindex="4" 
form="contact_form_id" type="checkbox" value="sendacopy" checked="checked" />

我需要存储页面重新加载时是否选中或取消选中该复选框(无论该复选框是通过空格键还是通过鼠标单击激活/停用)。我想使用 localStorage 来实现此目的，使用纯 JavaScript，不使用 jQuery。

我有这些函数来保存和恢复输入字段的值(它适用于所有文本输入，但不适用于复选框):

function saveValue(e) {
    var id = e.id; 
    var val = e.value;
    localStorage.setItem(id, val);
}

function getSavedValue(v) {
    if (localStorage.getItem(v) === null) {
        return ""; 
    }
    return localStorage.getItem(v);
}

我在网上做了很多研究，但找不到我特别需要的东西。请对我温柔点，我是初学者。这就是我尝试对这两个函数执行的操作，但它根本不起作用:

function saveValue(e) {
    var id = e.id; 
    var val = e.value;
    if (id == "copy") {
        val = e.checked;
    }
    localStorage.setItem(id, val);
}

function getSavedValue(v) {
    if (localStorage.getItem(v) === null) {
        return ""; 
    }
    if (v == "copy") {
        if (localStorage.getItem(v) == true)
            return "true";
        if (localStorage.getItem(v) == false)
            return "false";
    }
    return localStorage.getItem(v);
}

这就是我调用 getSavedValue() 函数的方式:

document.getElementById("copy").value = getSavedValue("copy");

好的，我正在取得进展，这是我的复选框:

<input id="copy" name="varcopy" onkeyup="saveChecked(this)" 
onmouseup="saveChecked(this)" tabindex="4"                     
form="contact_form_id" type="checkbox" />

这些是我的功能:

function saveChecked(e) {
    var id = e.id; 
    var val = e.checked?1:0;
    localStorage.setItem(id, val); 
}

function getSavedValue(v) {
    if (localStorage.getItem(v) === null) {
        return ""; 
    }
    return localStorage.getItem(v);
}

这是调用:

document.getElementById("copy").checked = !!getSavedValue("copy");

问题是它总是默认为 true，或者总是默认为 false。它不会切换。

Answer 1

这可以简单地实现如下:

var isChecked = !!getSavedValue('someKey');
var checkbox = document.getElementById('copy');

checkbox.checked = isChecked;

!!getSavedValue('someKey'); 将函数返回的值转换为 bool 值。空字符串、未定义和 null 将转换为 false，其他任何内容都将转换为 true。