Keep checkbox checked or unchecked on page reload, using vanillla JS

Question

I can't wrap my head around this. I have this checkbox:

<input id="copy" name="varcopy" onkeyup="saveValue(this)" tabindex="4" 
form="contact_form_id" type="checkbox" value="sendacopy" checked="checked" />

I need to store if the checkbox is checked or unchecked on page reload (whether the checkbox is actived/deactivated by spacebar or on mouseclick). I want to use localStorage for this, in plain JavaScript, no jQuery.

I have these functions to save and restore values of input fields (it works for all text inputs, but not for the checkbox):

function saveValue(e) {
    var id = e.id; 
    var val = e.value;
    localStorage.setItem(id, val);
}

function getSavedValue(v) {
    if (localStorage.getItem(v) === null) {
        return ""; 
    }
    return localStorage.getItem(v);
}

I did much research on the net, but I can't find what I specifically need. Please be gentle on me, I'm a beginner. This is what I tried to do with these 2 functions, but it doesn't work at all:

function saveValue(e) {
    var id = e.id; 
    var val = e.value;
    if (id == "copy") {
        val = e.checked;
    }
    localStorage.setItem(id, val);
}

function getSavedValue(v) {
    if (localStorage.getItem(v) === null) {
        return ""; 
    }
    if (v == "copy") {
        if (localStorage.getItem(v) == true)
            return "true";
        if (localStorage.getItem(v) == false)
            return "false";
    }
    return localStorage.getItem(v);
}

This is how I invoke the getSavedValue() function:

document.getElementById("copy").value = getSavedValue("copy");

Ok, I'm making progress, this is my checkbox:

<input id="copy" name="varcopy" onkeyup="saveChecked(this)" 
onmouseup="saveChecked(this)" tabindex="4"                     
form="contact_form_id" type="checkbox" />

These are my functions:

function saveChecked(e) {
    var id = e.id; 
    var val = e.checked?1:0;
    localStorage.setItem(id, val); 
}

function getSavedValue(v) {
    if (localStorage.getItem(v) === null) {
        return ""; 
    }
    return localStorage.getItem(v);
}

And this is the invocation:

document.getElementById("copy").checked = !!getSavedValue("copy");

The problem is it always defaults to true, or always defaults to false. It doesn't switch.

Answer 1

This can be achieved as simple as follows:

var isChecked = !!getSavedValue('someKey');
var checkbox = document.getElementById('copy');

checkbox.checked = isChecked;

!!getSavedValue('someKey'); converts the value returned by your function into a boolean. An empty string, undefined and null will be converted to false and anything else will be converted to true.

Answer 2

Here is modified saveValue function, you can use it.

function saveValue(e) {
    var id = e.id; 
    var val = e.value;
    if(e.type === 'checkbox') {
        val = e.checked?1:0;
    }
    localStorage.setItem(id, val);
}

Answer 3

It seems the checked attribute on a checkbox returns either true or false. (Somehow also it is true when unchecked, and false when checked) Problem is that if I do this:

val = e.checked?1:0;

it will always return 1. I think the checked attribute returns a string, not a boolean, so when I do the above in JavaScript, it will always be a non-empty string, meaning it will return true. I had to do this instead:

var val = ""; 
if (e.checked != true) { //Not-equals because true is unchecked, false is checked
    val = "1";
}

Now it works, the checkbox remembers its state on page reload.

Answer 4

The following example will do that for you... Enjoy... :-)

<script>

function saveData(e) {
  let id = e.id; 
  let val;
  if (e.type === 'checkbox'){
    val = e.checked;
  }else{
    val = e.value;
  } 

  localStorage.setItem(id, val); 
}

function loadFieldData(id){
  let elm = document.getElementById(id);
  let value = localStorage.getItem(id);

  if (elm) {
    if (elm.type === 'checkbox') {
      elm.checked = Boolean(value);
    }else{
      elm.value = value;
    }
  }
}

function loadData() {
  loadFieldData('text1');
  loadFieldData('copy');
}

</script>

<body>

<input id="text1" onkeyup="saveData(this)" onchange="saveData(this)" type="text" />

<br/>

<input id="copy" onchange="saveData(this)" type="checkbox" />
<br/>
<br/>

<input type="button" onclick="loadData()" value="Load Data" />

</body>