复选框的本地存储

Question

我试图将本地存储添加到两个ckeckbox，但是第一个复选框的行为与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;
    }
}