var i, checkboxes = document.querySelectorAll('input[type=checkbox]');
function save() {
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;
}
}
It doesn’t work when you put it in the head because at that point, the browser has not yet loaded the checkboxes. Note that the first line of your code looks for checkboxes in the page, but they haven’t loaded yet.
I bet there is a lot of confusion for new web developers as to where to put the script tags. I learned early on (a few months ago - I’m fairly new) that your script tags/links should be at the end of body. Your HTML should be parsed first. There are examples abound everywhere of script tags located in the head of HTML documents. Even some documentation shows script tags in the head. There needs to be better education about this in general.