localstorage for checkboxes

Im trying to add localstorage to two ckeckboxes but the first checkbox behaves exactly like the secod even when they have different states. if first checkbox is unchecked and second is checked , on page reload the first becomes checked just like the second and when the second is unchecked , the first also becomes unchecked even if it was checked . I dont know why its behaving like a copy cat here is a github link to the project : http://ift.tt/2mryxLr

thanks

<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;
  }
}