Local storage data not saving on page refresh

Question

I am creating a settings portion on a website. I want the features chosen to be "saved" and kept when the page refreshes. I attempted this but it seems to just reset the form when I refresh the page. Another issue is when I click on the cancel button, the toggle buttons reset but the dropdown comes back blank instead of going back to the placeholder "select timezone". The issue most likely lies in my javascript code below. It's also throwing an error in stack overflow but works properly on my website (minus the issues described above). Any suggestions would be much appreciated!

 // ---------- TOGGLE BTN ---------- const toggle = document.getElementsByClassName("toggle"); const labels = document.getElementsByClassName("labels"); for(let i=0; i < 2; i++) { labels[i].innerHTML = "OFF"; toggle[i].addEventListener( "click", () => { if(labels[i].innerHTML == "OFF") { // console.log("button toggled"); labels[i].classList.add("on"); labels[i].innerHTML= "ON"; } else { labels[i].classList.remove("on"); labels[i].innerHTML = "OFF"; } }); } // ---------- LOCAL STORAGE DATA ---------- const save = document.getElementById("save"); const cancel = document.getElementById("cancel"); const emailBtn = document.getElementById("togBtn"); const publicBtn = document.getElementById("togBtn2"); const zone = document.getElementById("timezone"); // emailBtn.value = data; // publicBtn.value = data; // zone.value = data; const data = { email: emailBtn.value, privacy: publicBtn.value, timezone: zone.value } var emailVal = localStorage.getItem("email"); var privacyVal = localStorage.getItem("privacy"); var zoneVal = localStorage.getItem("timezone"); save.addEventListener('click', () => { localStorage.setItem("email", emailBtn.value); localStorage.setItem("privacy", publicBtn.value); localStorage.setItem("timezone", zone.value); }); cancel.addEventListener('click', () => { localStorage.clear(); for(let i=0; i < 2; i++) { labels[i].innerHTML = "OFF"; labels[i].classList.remove("on"); } emailBtn.checked = false; publicBtn.checked =false; zone.value = 'Select Timezone'; });

 .settings { padding-left: 15px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .settings h3 { flex-basis: 100%; } .button1, .button2 { flex-basis: 100%; display: flex; align-items:center; } label { flex-basis: 90%; } input { flex-basis: 10%; } .form-field { flex-basis: 100%; background-color: rgb(241, 240, 240); border: 1px solid lightgrey; color: grey; border-radius: 5px; padding: 10px; margin: 0 15px 10px 0; } .settings-button { display: flex; justify-content: center; } button { margin: 10px 15px 10px 0; padding: 10px; border: 1px solid lightgrey; border-radius: 5px; } #save, #cancel { flex-basis: 50%; } #save { background-color: #7477BF; color: white; } #cancel { background-color: darkgray; color: white; } #timezone { margin-top:25px; } /* toggle button */ .toggle { -webkit-appearance: none; -webkit-tap-highlight-color: transparent; position: relative; outline: 0; cursor: pointer; margin: 10px 15px; } .toggle:after { content: ''; width: 80px; height: 28px; display: inline-block; background: rgba(196, 195, 195, 0.55); border: 2px solid rgba(196, 195, 195, 0.55); border-radius: 18px; clear: both; } .toggle:before { content: ''; width: 20px; height: 20px; display: block; position: absolute; top: 3px; /* left: 0; top: -3px; */ border: 2px solid rgba(196, 195, 195, 0.55); border-radius: 50%; background: rgb(255, 255, 255); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); } .toggle:checked:before { left: 54px; box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6); } .toggle:checked:after { background: #7477BF; } .toggle, .toggle:before, .toggle:after, .toggle:checked:before, .toggle:checked:after { transition: ease .4s; -webkit-transition: ease .4s; -moz-transition: ease .4s; -o-transition: ease .4s; } .labels { color: gray; position: relative; font-size: 15px; transform: translate(-48px, -3px); } .on { color: white; transform: translate(-90px, -3px); }

 <section class="settings" id="settings"> <h3>Settings</h3> <!-- custom CSS toggle code--> <div class="button1"> <label for="togBtn">Send Email Notfications </label> <input type="checkbox" class="toggle" id="togBtn"> <span class="labels"></span> </div> <div class="button2"> <label for="togBtn2">Set Profile to Public &nbsp; &nbsp; &nbsp;</label> <input type="checkbox" class="toggle" id="togBtn2"> <span class="labels"></span> </div> <select class="form-field" id="timezone"> <option disabled selected>Select a Timezone</option> <option>Eastern</option> <option>Western</option> <!-- more options --> </select> <div class="settings-button" > <button class="button-primary" id="save">Save</button> <button class="button-disabled" id="cancel">Cancel</button> </div> </section>

Answer 1

here a working example .

The problems with your code were that you were using emailBtn.value and publicBtn.value instead of emailBtn.checked and publicBtn.checked (they are checkbox so in order to get the correct value you have to read che checked property) and you were not loading the saved values on document load (the function inside window.addEventListener("load", ...) in my example.

Hope this helps you.