如何在網站的頁面刷新中保存切換按鈕的“開/關”模式？

Question

我正在嘗試將W3Schools Toggle Switch用於我的網站暗/亮模式切換。

這是我的網站測試頁面，我在其中添加了切換開關，但發生的事情是當頁面刷新時，開關無法保存它的“開/關”模式。

當我刷新頁面時，它會恢復到默認的“關閉”模式。

如何在頁面刷新中保存它的位置？ 也請分享代碼。

謝謝

Answer 1

首先在“// On page load se the theme”上更新下面的代碼。 部分

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">

Answer 2

您可以存儲切換狀態（打開或關閉到 localstorage）並從 localstorage 獲取值。