如何在 sessionStorage 中切換 True 或 False

Question

我正在嘗試向網站添加暗模式。 當有人單擊暗模式按鈕時，它將添加額外的 CSS 類，並在再次單擊該按鈕時將其刪除。

我知道我可以使用toggleClass輕松做到這一點，但我不想在頁面刷新或網站上打開其他頁面時自動禁用它。

我一直在玩sessionStorage但到目前為止無法成功我在這里想出了這段代碼：

<a href="#" class="darkmode-button" id="dmbutton" onclick="changeText()">Dark Mode</a>

<div class="header-wrap">
  Testing toggle with session
</div>

$('.darkmode-button').click(function() {
  if (sessionStorage.getItem('darkmode', 'true')) {
    $('.header-wrap').removeClass('dark-header');
    sessionStorage.setItem('darkmode', 'false');
  }
  
  if (sessionStorage.getItem('darkmode', 'false')) {
    $('.header-wrap').addClass('dark-header');
    sessionStorage.setItem('darkmode', 'true');
  }
});

function changeText() {
  var x = document.getElementById("dmbutton");
  if (x.innerHTML === "Dark Mode") {
    x.innerHTML = "Light Mode";
  } else {
    x.innerHTML = "Dark Mode";
  }
}

.header-wrap {
  color: black;
}

.dark-header {
  color: white;
  background-color: black;
}

有人可以分享一個如何實現它的工作示例嗎？

我之前已經創建了一個問題，但它被標記為重復這個答案。 我都讀了，但還是想不通。

Answer 1

要執行您需要的操作，只需在父元素上設置一個 class， body在這種情況下可以正常工作，以指示何時打開暗模式。 然后，您可以在 CSS 的所有相關選擇器中使用此 class 來更新 UI。

Regarding the session storage logic, set a boolean flag when the dark mode is updated when the button is clicked and set the class on the body based on the session storage flag when the page loads.

將它們放在一起看起來像這樣：

<a href="#" class="darkmode-button" id="dmbutton">Dark Mode</a>

<div class="header-wrap">
  Testing toggle with session
</div>

let body = document.body;
let dmButton = document.querySelector('#dmbutton');

dmButton.addEventListener('click', e => {
  body.classList.toggle('dark');
  sessionStorage.setItem('darkmode', body.classList.contains('dark'));
  e.target.textContent = e.target.textContent.trim() === 'Dark Mode' ? 'Light Mode' : 'Dark Mode';
});

let darkModeEnabled = JSON.parse(sessionStorage.getItem('darkmode')); // boolean type coercion
if (darkModeEnabled) {
  body.classList.add('dark');
  dmButton.textContent = 'Light Mode';
}

.header-wrap {
  color: black;
}

body.dark {
  background-color: #666; 
}

body.dark .header-wrap {
  color: white;
  background-color: black;
}

這是jsFiddle中的一個工作示例，因為 SO 片段是沙盒化的並且不允許本地/會話存儲訪問。

Answer 2

我不知道這段代碼的邏輯，但它對我有用，我從這個解決方案中找到了感謝 Stackoverflow

<a href="#" class="darkmode-button" id="dmbutton">Dark Mode</a>

<div class="header-wrap">
  Testing toggle with session
</div>

var $dark = $('.header-wrap')

if (localStorage.getItem('darkmode') === 'true') {
    $dark.addClass('dark-header');
}

$('.darkmode-button').click(function() {
    $dark.toggleClass('dark-header');
    localStorage.setItem('darkmode', $dark.hasClass('dark-header'));
});

.header-wrap {
  color: black;
}

.dark-header {
  color: white;
  background-color: black;