如何使用 javascript 在刷新时保存切换按钮 state

Question

Hey everyone I am having difficulty keeping the state of my toggle button on when i refresh the page, it is stored in localStorage correctly, but even after several attempts, I wasn't able to call the function to execute on page refresh

 save.addEventListener('click', () => { localStorage.setItem("checkbox1", checkBox1.checked); localStorage.setItem("checkbox2", checkBox2.checked); localStorage.setItem('timezone', timezone.selectedIndex); } function isChecked() { const checkBox1 = document.getElementById('checkbox1'); if (document.getElementById('checkbox1').checked == false) { localStorage.getItem('checkbox1'); } } window.onload = function() { isChecked(); }; }

 <form> <div class="toggle-switch-1"> <p class="notification-1">Send Email Notifications</p> <!-- toggle switch goes here --> <label type="button" class="switch-light switch-candy"> <input id="checkbox1" type="checkbox"> <span> <span id="off">Off</span> <!-- <span id="on1">On</span> --> <!-- <button onclick="check()" id="on1">On</button> --> <span id="on1">On</span> <a></a> </span> </label> </div> <div class="toggle-switch-2"> <p class="notification-2">Send Profile to Public</p> <!-- toggle switch goes here --> <label class="switch-light switch-candy" onclick=""> <input id="checkbox2" type="checkbox"> <span> <span id="off">Off</span> <span id="on2">On</span> <a></a> </span> </label> </div> <select class="form-field" id="timezone"> <option disabled selected>Select Timezone</option> <option>Eastern Standard Time (EST)</option> <option>Pacific Standard Time (PST)</option> <option>Central Standard Time (CST)</option> <option>Mountain Standard Time (MST)</option> </select> <div class="settings-button"> <button type="button" class="button-primary" id="save">Save</button> <button class="button-disabled" id="cancel">Cancel</button> </div> </form>

Im trying to save the state of the button on refresh (clicking save button) but it defaults to off when I refresh as well as the drop down list of timezones, if anyone can help clear this up, I would appreciate it Thank you!!

Answer 1

You are just getting the value from the local storage. But not actually assigning it to any toggle buttons. You need to assign them to make it work

 function isChecked() { document.getElementById('checkbox1').checked = localStorage.getItem('checkbox1') === 'true'); }

This is how it works:

• Get the value out of local storage.

• The value saved in the local storage would be of type string.

• So we need to convert it to Boolean value to make it work. The === check will do that for you.

• Finally assign it to the checkbox.