如何在 JavaScript 中將暗模式保存到本地存儲

Question

const btn = document.querySelector(".dark_mode_btn button");
const element = document.querySelectorAll("div, h2, html");
    

$(btn).click(function(){
    if($(element).hasClass('dark_mode'))
   {
      $(element).removeClass('dark_mode');
            
    } else{
      $(element).addClass('dark_mode');
           
    }
});

當我移動到其他頁面時，我的代碼無法保存。 如何將鞋保存在本地存儲中？

Answer 1

您可以使用 JavaScript 的 localStorage 來保存首選項。

您可以存儲一個字符串 ('true'/'false') 並檢查頁面加載。

這樣的事情會有所幫助：

let darkMode = localStorage.getItem("dark-mode");
//darkMode will be a string
if(darkMode != null && darkMode === 'true'){
    $(element).addClass("dark_mode");
}

使用localStorage.setItem()設置值。 例如： localStorage.setItem("dark-mode","true"); 或localStorage.setItem("dark-mode","false");

更多信息： 在 HTML5 localStorage 中存儲對象

Answer 2

您可以簡單地將其添加到 localStorage 的 using.setItem() 方法中，您可以檢索相同的 using.getitem() 方法。 請找到以下代碼

const btn = document.querySelector(".dark_mode_btn button");
const element = document.querySelectorAll("div, h2, html");
    

$(btn).click(function(){
    if($(element).hasClass('dark_mode'))
   {
      $(element).removeClass('dark_mode');
      localstorage.setItem("darkModeEnabled","true")
            
    } else{
      $(element).addClass('dark_mode');
      localstorage.setItem("darkModeEnabled","false")     
    }
});
// To get the Item use localStorage.getItem('darkModeEnabled');

請確保在存儲中僅存儲字符串/布爾類型數據，因為它只接受字符串化數據。對於對象，請使用 JSON.stringify() 對數據進行字符串化

注意：我建議從數據庫而不是存儲中加載這些值，因為一旦用戶注銷/會話結束或清除存儲，您將丟失信息。 如果這對您有用，請接受答案謝謝