时间戳

首页 > 解决方案 > 如何在网站的页面刷新上保存切换按钮的“开/关”模式？

javascript - 如何在网站的页面刷新上保存切换按钮的“开/关”模式？

问题描述

我正在尝试将W3Schools Toggle Switch用于我的网站 Dark/Light Mode Toggle。

这是我的网站测试页面，我在其中添加了切换开关，但发生的事情是当页面刷新时，开关无法保存它的“开/关”模式。

当我刷新页面时，它会恢复到默认的“关闭”模式。

如何保存它在页面刷新上的位置？

标签： javascripthtmlcss

解决方案

首先更新下面的代码“//页面加载主题。” 部分

var tSwitcher = document.getElementById('theme-switcher');
let element = document.body;

let onpageLoad = localStorage.getItem("theme") || "";
if(onpageLoad != null && onpageLoad  == 'dark-mode'){
  tSwitcher.checked = true;
} 
element.classList.add(onpageLoad);


function themeToggle(){
  if(tSwitcher.checked){
      localStorage.setItem('theme', 'dark-mode');
        element.classList.add('dark-mode');
    } else {
      localStorage.setItem('theme', '');
        element.classList.remove('dark-mode');
    }
}

和改变

<input type="checkbox"  onclick="themeToggle()">

to 

<input type="checkbox"  onclick="themeToggle()" id="theme-switcher">

推荐阅读