如何在 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() 对数据进行字符串化

注意：我建议从数据库而不是存储中加载这些值，因为一旦用户注销/会话结束或清除存储，您将丢失信息。 如果这对您有用，请接受答案谢谢