Javascript - 如何根据变量设置选中的复选框

Question

我已尽最大努力搜索所有答案，但找不到任何具体的答案。所以，如果您发现了什么，请告诉我，我会立即将其删除。

我创建了一个 JSFiddle 来显示我的问题(为了便于引用，下面复制了 JS 部分):http://jsfiddle.net/hg67R/1/

当我尝试根据变量值设置复选框的值时，它似乎设置不正确。我创建的示例应该保存每个复选框的当前状态(这是正确的)。然后，无论您如何更改这些复选框，它都应该在您单击加载时将它们更改回来。存储变量是正确的，但它没有正确设置复选框。我确定这是显而易见的，但我肯定看不到。

function save() {
    localStorage.setItem("numbers", document.getElementById("Numbers").checked);
    localStorage.setItem("tips", document.getElementById("Tips").checked);
}

function load() {
    document.getElementById("Numbers").checked = localStorage.numbers;
    document.getElementById("Tips").checked = localStorage.tips;

    console.log("numbers storage: " + localStorage.numbers);
    console.log("numbers box: " + document.getElementById("Numbers").checked);
    console.log("tips storage: " + localStorage.tips);
    console.log("tips box: " + document.getElementById("Tips").checked);
}

console.logs 只是告诉我变量正在正确存储和加载。

谢谢!

Answer 1

除了 mrk 的回答:

function save() {
    localStorage.setItem("numbers", document.getElementById("Numbers").checked);
    localStorage.setItem("tips", document.getElementById("Tips").checked);
}

function load() {
    document.getElementById("Numbers").checked = localStorage.numbers === 'true';
    document.getElementById("Tips").checked = localStorage.tips === 'true';

    console.log("numbers storage: " + localStorage.numbers);
    console.log("numbers box: " + document.getElementById("Numbers").checked);
    console.log("tips storage: " + localStorage.tips);
    console.log("tips box: " + document.getElementById("Tips").checked);
}

<input type="checkbox" id="Numbers">Short Numbers</input>
<input type="checkbox" id="Tips">Show Tips</input>
<br />
<br />
<button type="button" onClick="save()">Save</button>
<button type="button" onClick="load()">Load</button>

最大的变化是我检查 localStorage 值是否与“true”完全一致。

document.getElementById("Numbers").checked = localStorage.numbers === 'true';