+ 1

How to save a checked box with localStorage

I am trying to save if someone checked a box with javascripts localStorage but for some reason it wont work. Here's the code: <!DOCTYPE html> <html> <head> </head> <body> <input type="checkbox" id="Box" onclick="Box()"> <p id="Blank"></p> <script> localStorage.setItem('Box1', 0); var CheckBox = document.getElementById("Box"); if(localStorage.getItem('Box1') == 1) { document.getElementById("Blank").innerHTML = "Hello"; } function Box() { if(CheckBox.check) { localStorage.setItem('Box1', 1); } else { localStorage.setItem('Box1', 0); } } </script> </body> </html>

html javascript localStorage

4th Jul 2018, 7:28 PM

Gavin

9 Answers

+ 2

Gavin CheckBox.check should read CheckBox.checked. if(localStorage.getItem('Box1') == 1) is read once right after the initial setting of (Box1,0). If you want hello displayed everytime Box1 is checked then you must check localStorage every time the checkbox is clicked. https://code.sololearn.com/Wr1FUCsC2p1f/#html

4th Jul 2018, 10:15 PM

ODLNT

+ 2

Josh Mizzi Please reference links below. https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage https://www.w3schools.com/html/html5_webstorage.asp

4th Jul 2018, 8:50 PM

ODLNT

+ 1

Gavin no worries, Are getting any error messages? What device are you using to write this code?

5th Jul 2018, 1:20 AM

ODLNT

+ 1

Gavin I'm using Sololearn website on my windows os pc/ and nox android simulator(to write comments in Code Playgrounds comment section since you can't don't from the pc) When I ran your code I got this error message "Uncaught TypeError: Cannot read property 'checked' of null, Line: 16" 'null' is the key, in this case, the compiler is indicating that on line 16 (if(CheckBox.checked) it can't evaluate the checked property because there is no CheckBox aka <input type="checkbox" id="b1" onclick="Box()">. And there is no input because the script trying to access the DOM before the document is loaded. The easiest way to solve this is to move the script below the last element within the body tags. See link for alternative fixes. https://www.w3schools.com/jsref/event_onload.asp This should help, let me know either way.

5th Jul 2018, 8:45 PM

ODLNT

+ 1

ODLNT Awesome! I moved the script tag to the bottom and it didn't work but then i added the "onload" to my body tag and made it execute the "check()" function and it worked perfectly! Thanks so much for all the help man! If there was some sort of rating system on here i would rate you instantly hahahaha. It does save the checkboxes as well so thanks a ton!

5th Jul 2018, 9:36 PM

Gavin

In order to save to local-storage you need to create a cookie or/and use the local storage object available in misy modern browsers. Also view ODLINT's post as they have added useful links. ODLNT

4th Jul 2018, 8:24 PM

josh mizzi

ODLNT Thanks a ton!

5th Jul 2018, 12:01 AM

Gavin

@ODLNT By no means do you have to, but I tried this in a different manner in my final project's test file and the point is to save if the box is checked. I copy/pasted your code (which worked) and made a slight few modifications but now it doesnt work. Again by no means do you have to look over it but honestly, im stumped. Thanks - Gavin. https://code.sololearn.com/WGPm3vZ0d3Oq/#html

5th Jul 2018, 1:05 AM

Gavin

@ODLNT In sololearn i get a script error and i use a windows 10 machine with visual studio code. I use chrome to launch the file

5th Jul 2018, 2:47 AM

Gavin