Localstorage：保存多个会话的复选框状态而不被覆盖答案

【问题标题】：Localstorage: Save multiple session's checkbox status without overwrittenLocalstorage：保存多个会话的复选框状态而不被覆盖
【发布时间】：2017-02-11 23:30:33
【问题描述】：

我想要做的是当用户单击“提交”而不覆盖以前的状态时，将复选框的状态保存到本地存储中。因此，本地存储可能具有“真、假、假、真...”等值。目前，如果我在新会话中提交表单，我的本地存储将覆盖复选框的状态。

JS：

document.addEventListener("deviceready",onDeviceReady,false);

function onDeviceReady() {
        document.getElementById("xbutton").addEventListener("click",savecheck,false); }
function savecheck(){
    var checkb = document.getElementById("MedA");
    localStorage.setItem("MedA", checkb.checked);
}

html:

<form>
        <div id='medA'>
            <input type="checkbox" id="MedA" name="Med" value="A">Medication A
         </div>
<input id="xbutton" type="button" onClick="savecheck()" value="Submit">
</form>

【问题讨论】：

所以使用数组
与stackoverflow.com/questions/19715948/localstorage-troubles重复？

标签： javascript jquery cordova checkbox local-storage

【解决方案1】：

这是一种方法：

function savecheck() {
    var checkb = document.getElementById("MedA");
    var medAHistory = JSON.parse(localStorage.getItem('MedA') || "[]");
    medAHistory.push(checkb.checked);
    localStorage.setItem("MedA", JSON.stringify(medAHistory));
}

要记住的是 localStorage 只能存储字符串值。也就是说，存储到 localStorage 时需要将任何对象或数组序列化为字符串，然后从 localStorage 读回时反序列化（解析）。

注意：如果您之前已经将“MedA”项目保存在本地存储中，如果您将其（解析）表示从简单值更改为数组，则需要将其删除。

【讨论】：

谢谢。我只是想知道为什么它每次都给出双重状态？就像如果我取消选中按钮并单击提交，即使我只单击一次提交，值也会为 [false, false]？
代码通过保存多个复选框状态来工作，但它只是为每个表单提交保存重复状态。

【解决方案2】：

可以获取当前本地存储项：

var oldItem = localStorage.getItem("MedA");
var newItem = oldItem +", " + String(checkb.checked);
localStorage.setItem(newItem, checkb.checked);

并且可能会增加一点处理逗号的逻辑（例如，如果原始本地存储变量为空，则没有逗号）。

【讨论】：

【解决方案3】：

你可以这样做：

function savecheck() {
  var data = [];
  data[0] = document.getElementById("MedA").checked;
  localStorage.setItem("MedA", JSON.stringify(data));
}

【讨论】：