复选框的本地存储

Question

我试图将 localstorage 添加到两个 ckeckboxes 但第一个复选框的行为与 secod 完全相同，即使它们具有不同的状态。如果未选中第一个复选框并且选中了第二个复选框，则在页面重新加载时，第一个复选框就像第二个一样被选中，当第二个未选中时，第一个也变为未选中，即使它已被选中。我不知道为什么它表现得像个模仿猫 这是该项目的 github 链接：https://github.com/OGUNSOLA/project-9-master-

谢谢

<div class="notify">
                <p>Send Email Notifications</p>
                <div class="onoffswitch toggleSwitch1" >
                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" >
                    <label class="onoffswitch-label" for="myonoffswitch">
                        <span class="onoffswitch-inner"></span>
                        <span class="onoffswitch-switch"></span>
                    </label>
                </div>
            </div>

            <div class="profile">
                <p>Set Profile To Public</p>
                <div class="onoffswitch toggleSwitch2" >
                    <input type="checkbox" name="onoffswitch2" class="onoffswitch-checkbox" id="myonoffswitch2" >
                    <label class="onoffswitch-label" for="myonoffswitch2">
                        <span class="onoffswitch-inner"></span>
                        <span class="onoffswitch-switch"></span>
                    </label>
                </div>
            </div>


var save = document.getElementById("save");
save.addEventListener("click",saved,false);

window.onload=load;



var i;
var checkboxes = document.querySelectorAll('input[type=checkbox]');


function saved() {

  for(i = 0; i< checkboxes.length;i++){
    localStorage.setItem(checkboxes[i].value, checkboxes[i].checked);
  }
}

function load (){
  for(i = 0; i< checkboxes.length;i++){
    checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === "true"? true:false;
  }
}

Answer 1

您基于value 保存到localstorage，但您的复选框上没有value 属性。试试这个：

HTML

<div class="notify">
    <p>Send Email Notifications</p>
    <div class="onoffswitch toggleSwitch1">
        <input type="checkbox" name="onoffswitch" value="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
        <label class="onoffswitch-label" for="myonoffswitch">
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
    </div>
</div>
<div class="profile">
    <p>Set Profile To Public</p>
    <div class="onoffswitch toggleSwitch2">
        <input type="checkbox" name="onoffswitch2" value="onoffswitch2" class="onoffswitch-checkbox" id="myonoffswitch2">
        <label class="onoffswitch-label" for="myonoffswitch2">
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
    </div>
</div>

JavaScript

var save = document.getElementById("save");
save.addEventListener("click", saved, false);
window.onload = load;
var i;
var checkboxes = document.querySelectorAll('input[type=checkbox]');

function saved() {
    for (i = 0; i < checkboxes.length; i++) {
        localStorage.setItem(checkboxes[i].value, checkboxes[i].checked);
    }
}

function load() {
    for (i = 0; i < checkboxes.length; i++) { 
        checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === "true" ? true : false;
    }
}