0

嘿大家我在刷新页面时很难保持切换按钮的状态，它正确存储在 localStorage 中，但即使经过多次尝试，我也无法调用该函数以在页面刷新时执行

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>

我试图在刷新时保存按钮的状态（单击保存按钮），但是当我刷新以及时区的下拉列表时它默认为关闭，如果有人可以帮助清除它，我将不胜感激谢谢！

4

1 回答 1

2

您只是从本地存储中获取价值。但实际上并未将其分配给任何切换按钮。您需要分配它们以使其工作

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

这是它的工作原理：

  • 从本地存储中获取价值。

  • 保存在本地存储中的值将是字符串类型。

  • 所以我们需要将其转换为布尔值以使其工作。=== 检查将为您做到这一点。

  • 最后将其分配给复选框。

于 2021-04-20T20:21:12.640 回答