如何解决如何使用javascript在刷新时保存切换按钮状态
大家好,我在刷新页面时难以保持切换按钮的状态,它正确存储在 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>
我正在尝试在刷新时保存按钮的状态(单击保存按钮),但是当我刷新以及时区下拉列表时它默认为关闭,如果有人可以帮助解决这个问题,我将不胜感激 谢谢你!!
解决方法
您只是从本地存储中获取值。但实际上并未将其分配给任何切换按钮。您需要分配它们才能使其工作
function isChecked() {
document.getElementById('checkbox1').checked = localStorage.getItem('checkbox1') === 'true');
}
这是它的工作原理:
-
从本地存储中获取值。
-
保存在本地存储中的值将是字符串类型。
-
因此我们需要将其转换为布尔值才能使其工作。 === 检查将为您做到这一点。
-
最后将其分配给复选框。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。