checkbox state always turn true when false in localStorage

Question

For some reason, when loading the page, the checkbox checked state is always true and when it's supposed to be set to the actual storage value false

if (localStorage.getItem("diff_search") == undefined) {
        localStorage.setItem("diff_search", false)
}

document.getElementById("diff_search_box").checked = localStorage.getItem("diff_search")
// localStorage.getItem("diff_search") = false
// document.getElementById("diff_search_box").checked become true for no reason here

document.getElementById("diff_search_box").addEventListener("change", function() {
   if (this.checked){
       localStorage.setItem("diff_search", true)
   } else {
       localStorage.setItem("diff_search", false)
   }
});

The problem is not about storing the value, but actually setting the state of the checkbox.

I also Know that localStorage can store Boolean, contrary to what some comment say, after all, localStorage is (i could be wrong here) a json file i can get value from using keys.

to Finish, just doing

document.getElementById("diff_search_box").checked = true;

won't change the checkbox state and it will stay the same as before

example:

https://jsfiddle.net/Lrqfwamv/ as you can see, after reloading the page, the state is not conserved and is static
edit: updated code in link since auto conversion to Boolean doesn't seem to occur for people testing

localStorage only stores strings. Anything not a string will have `toString()` called on it before storage. Therefore, `getItem` will always return a string. Strings with value (not empty) are always truthy. — Heretic Monkey, Apr 05 '21 at 22:54
Does this answer your question? [Cannot set boolean values in LocalStorage?](https://stackoverflow.com/questions/3263161/cannot-set-boolean-values-in-localstorage) — Heretic Monkey, Apr 05 '21 at 22:56
title clearly say that the checkbox never change state, it has nothing to do with localStorage like stated in the code. i also know Heretic's comment is wrong since i managed to store all kind of type of variable in localStorage in the past, it's just like a json file after all. — Gess1t, Apr 05 '21 at 23:02
@Gess1t - After reading this in your comment: "_it's just like a json file after all_", may I recommend you read this: [What is JSON anyway](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON). TDLR; JSON is text - a.k.a a String. — Randy Casburn, Apr 05 '21 at 23:14
May I recommend you provide a [example] that demonstrates the behavior you've described? — Randy Casburn, Apr 05 '21 at 23:14
@RandyCasburn added a link to jsfiddle with the same issue occurring — Gess1t, Apr 05 '21 at 23:28
There's a very simple test to determine the truthfulness of my statement. Run `localStorage.setItem('test', false); console.log(localStorage.getItem('test') ? true : false);` and it will log `true`, because the string "false" is truthy. In fact, run `localStorage.setItem('test', false); console.log(Boolean(localStorage.getItem('test')));` and it will log `true`, because "false" is truthy. — Heretic Monkey, Apr 06 '21 at 12:27

score 0 · Answer 1 · answered Apr 05 '21 at 22:54

0

localStorage stores only strings and Boolean("false") === true. You have to convert that string back into the correct boolean value.

document.getElementById("diff_search_box").checked = "true" === localStorage.getItem("diff_search")

answered Apr 05 '21 at 22:54

Thomas

11,958
1
14
23

score 0 · Answer 2 · answered Apr 05 '21 at 22:55

You need to convert or parse the value back to a Boolean, because localStorage can only store strings.

If you try to save a non-string value into localStorage, it calls value.toString() before storing it.

Here is a way to reconstruct the boolean value, by simply comparing it with "true":

const stringValue = "false"; // fixed value, can't use localStorage in a Snippet
const boolValue = stringValue === "true";

console.log(boolValue);
console.log(typeof boolValue);

In general it is recommended to use JSON.stringify() when saving an object, combined with JSON.parse() when you want to reconstruct the original object again.

Mister Jojo · Answer 3 · 2021-04-06T00:27:49.833

0

first : make sure the id of your checkbox is the same as you use in your javascript code

<input type="checkbox"  id="diff_search_box">

this way, with JSON.stringify() and JSON.parse() and double question mark operator to check undefined values :

const diffSearkCB = document.getElementById('diff_search_box')

// on start if localStorage.getItem('diff_search') is undefined, the checkbox use false as default value
diffSearkCB.checked = JSON.parse(localStorage.getItem('diff_search')) ?? false 

diffSearkCB.addEventListener('change', function() {
  localStorage.setItem('diff_search', JSON.stringify(diffSearkCB.checked))
})

edited Apr 06 '21 at 00:27

answered Apr 05 '21 at 23:41

Mister Jojo

20,093
6
21
40

this won't change anything as the state of the checkbox can't be altered at all, also, this code is far from clean from my point of view, also, localStorage already return a Boolean for use by default on my side – Gess1t Apr 05 '21 at 23:44
@Gess1t your are wrong, It is not possible to store a boolean value in the localStorage, only text. you therefore need a function for transforming text to a boolean, whether it is true or false, that's pretty much what the JSON.stringify and parse methods do – Mister Jojo Apr 05 '21 at 23:51
still, your answer doesn't work as the state of the checkbox is static and therefore cannot be changed. – Gess1t Apr 05 '21 at 23:52
@Gess1t I wonder what test you did, I tested it myself before posting this answer here, and everything is working fine – Mister Jojo Apr 05 '21 at 23:56
i tested the case in the link, and as you can see, after the value in localStorage is set to true, the checkbox won't turn true when reloading the page, it stay unchecked and false – Gess1t Apr 05 '21 at 23:57
@Gess1t look at my own test image that I added: after a reload the localStorage returns the correct value – Mister Jojo Apr 06 '21 at 00:08
your image doesn't change the fact i don't obtain what you obtain with the code in my fiddle – Gess1t Apr 07 '21 at 00:12
@Gess1t nope, you cannot use the localStorage methods on fiddle, because they are disabled there. just use your browser natively to do this test – Mister Jojo Apr 07 '21 at 01:06

checkbox state always turn true when false in localStorage

3 Answers3