javascript - 在页面刷新时保存切换位置
问题描述
我在本地主机上的 wordpress 网站上使用 localStorage 进行暗/亮模式切换。一切都按预期工作,但是当刷新页面或访问不同的页面时,切换位置总是恢复为“亮”。
这是我正在使用的代码:
(function() {
let onpageLoad = localStorage.getItem("theme") || "";
let element = document.body;
element.classList.add(onpageLoad);
document.getElementById("theme").textContent =
localStorage.getItem("theme") || "light";
})();
function themeToggle() {
let element = document.body;
element.classList.toggle("dark-mode");
let theme = localStorage.getItem("theme");
if (theme && theme === "dark-mode") {
localStorage.setItem("theme", "");
} else {
localStorage.setItem("theme", "dark-mode");
}
document.getElementById("theme").textContent = localStorage.getItem("theme");
}
的HTML
<div class="slider-div">
<span class="slider-text">Light Mode</span>
<label class="switch">
<input type="checkbox" onclick="themeToggle()" id="theme">
<span class="slider round"></span>
</label>
<span class="slider-text">Dark Mode</span>
</div>
这是我用于复选框的 CSS:
.switch {
position: relative;
display: inline-block;
width: 54px;
height: 22px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #CCC;
-webkit-transition: .6s;
transition: .6s;
}
.slider:before {
position: absolute;
content: "";
height: 15px;
width: 15px;
left: 7px;
bottom: 4px;
background-color: #FFF;
-webkit-transition: .6s;
transition: .6s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
解决方案
您可以设置value
复选框的属性:
document.getElementById("theme").checked = localStorage.getItem("theme") === "dark-mode";
请注意,此代码需要在处理完复选框元素后运行。我建议<script>
使用此代码在复选框元素之后插入一个元素。
推荐阅读
- node.js - Open API 3.0 - 请求正文未显示在 swagger 文档页面中
- python - 列表到标签,错误的用户输入崩溃
- python - 在字符串python中查找连续的字母
- java - Maven编译阶段和插件目标有什么区别?
- html - 响应式图片库
- php - WooCommerce:从自定义字段设置属性值
- azure - 如何使用 azure arm 模板部署包含应用程序(例如 nginx)的集群 Kubernetes
- c# - 一个用于应用程序实例的 http 客户端
- json - 我应该在哪里更新状态才能从 API 获得正确的读数?
- google-apps-script - 获取 Google 表单测验 ViewScore URL