Unsaved Checkbox State with localStorage in Chrome and Edge

JavaScript
1

I’m trying to save and restore the state of a checkbox and other elements using localStorage when a user duplicates or closes the tab. It works well when I have just the checkbox, but as soon as I introduce additional elements, the checkbox state is not saved correctly in Chrome and Edge. Inspired by a similar issue discussed here, I created a version demonstrating the problem:

function save() {
  var checkbox = document.getElementById('checkbox1zaal1');
  var textarea = document.querySelector('textarea');
  localStorage.setItem('checkbox1zaal1', checkbox.checked);
  localStorage.setItem('box', textarea.value);
}

function load() {
  var checked = JSON.parse(localStorage.getItem('checkbox1zaal1'));
  document.getElementById("checkbox1zaal1").checked = checked;
  document.querySelector('textarea').value = JSON.parse(localStorage.getItem('box'));
}

function wis() {
  location.reload();
  localStorage.clear();
}

load();

<input type="button" id="ReserveerButton1" value="save" onclick="save()" />
<input type="button" id="Wisbutton1" value="delete" onclick="wis()" />
<input type="checkbox" id="checkbox1zaal1">
<textarea>Hello, world!</textarea>

DEMO

What am I missing? Is this a known bug in Chrome and Edge, or is there another approach I can try to ensure that the checkbox state is saved correctly alongside the other elements?

2

So localStorage stores either true or false. (or at least, it should be storing the string of “true” or “false”)

Why are we JSON parsing a boolean?

Hint: Did you forget to stringify your setItem? Or did you parse something that was supposed to be boolean-interpreted?

3

According to dfsq in his post, it’s used to change the string type to a boolean . I just tried to copy his fiddle.

4

his post is 10 years old.

localstorage will set items as strings.

Storage only supports storing and retrieving strings. If you want to save other data types, you have to convert them to strings. For plain objects and arrays, you can use JSON.stringify().
( Storage: setItem() method - Web APIs | MDN (mozilla.org))

You have two (well, three at least) options:
Fix the retrieve:
var checked = (localStorage.getItem('checkbox1zaal1') == "true")

Fix the save:
localStorage.setItem('checkbox1zaal1', JSON.stringify({"checkbox" : checkbox.checked});
which will then require the set to be
document.getElementById("checkbox1zaal1").checked = checked.checkbox;

Save multiple items in a single value, and retrieve an object (probably the better option…)

localStorage.setItem('formDetails', JSON.stringify({"checkbox1zaal1": checkbox.checked, "box": textarea.value}));
...
var data = JSON.parse(localStorage.getItem('formDetails'));
document.getElementById("checkbox1zaal1").checked = data.checkbox1zaal1;
document.querySelector('textarea').value = data.box;
5

Thanks for the answer, but I tried all of them to no success.

6

I need to adjust that for the case where there isnt a localStorage item yet. Other than that, it works as written.

  var data = JSON.parse(localStorage.getItem("formDetails")) ?? { "checkbox1zaal1": false, "box": "" };
7

The same problem. :pensive:

8

?

The codepen works.

9

I’m afraid it doesn’t. Steps to reproduce the issue: Navigate to the demo page/Codepen. Just check the checkbox. Click the save button, and then duplicate the tab. The checkbox on the duplicate tab is not checked.

10

I don’t think codepen is an ideal platform for this.

I noticed that localStorage.clear() doesn’t appear to be doing it’s job either.

When I substituted that with localStorage.removeItem('formDetails'), codepen objects with

Uncaught TypeError: location.removedByCodePen is not a function

This kind of indicates that codepen is preventing some of these actions.

1 Like
11

the codepen shell will be boxing off localstorage, is why duplicating doesnt work (It assumes you want a clean slate every time it loads the code, because that’s what sandboxing usually wants!) - thats why i put a reload button onto the form, to demonstrate what it would do in a normal page.

Type something in the box; check the checkbox.
Click save. This writes to localStorage.
Change the text in the box. Uncheck the checkbox.
Click reload. This pulls the state from localStorage and restores the form.

Only difference is i’m calling load() on a button push, in addition to page creation.

12

I just forgot about Codepen and created a single web page using your code. Then I tried it to no avail.

Please don’t. Just check the checkbox and save.

13

So show us your page where it doesnt work. Cause it works for me.