how to save toggle button state on refresh using javascript

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.