Question

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

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>

Answer 1

你可以这样做：

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

Answer 2

您可以获取当前的localstorage项目：

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

也许可以用更多的逻辑来处理逗号（例如，如果原始的本地存储变量是空的，则没有逗号）。

Answer 3

这是一种方法：

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”项，则需要在将其（已解析的）表示从简单值更改为数组时将其删除。

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

3 个答案: