Javascript 如何在会话存储中存储暗模式？

我正在我的网站上实施黑暗模式。我试图将用户首选项存储为会话存储，但我的代码不起作用

onload = function() {
if(sessionStorage.getItem("darkmode") === "true") {
    sessionStorage.getItem("darkmode");
            $( "body" ).addClass( "dark" );
            $("#switch").addClass("switched");
            sessionStorage.setItem("darkMode", "true");
   }
}


 (function($) { "use strict";

$(function() {
    var header = $(".start-style");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 10) {
            header.removeClass('start-style').addClass("scroll-on");
        } else {
            header.removeClass("scroll-on").addClass('start-style');
        }
    });
});

//Animation
$(document).ready(function() {
    $('body.hero-anime').removeClass('hero-anime');
});

//Menu On Hover
$('body').on('mouseenter mouseleave','.nav-item',function(e){
        if ($(window).width() > 750) {
            var _d=$(e.target).closest('.nav-item');_d.addClass('show');
            setTimeout(function(){
            _d[_d.is(':hover')?'addClass':'removeClass']('show');
            },1);
        }
});

//Switch light/dark
$("#switch").on('click', function() {
    if ($("body").hasClass("dark")) {
        //removes dark mode
        $("body").removeClass("dark");
        $("#switch").removeClass("switched");
        sessionStorage.setItem('darkmode', 'false');
    }
    else {
        $("body").addClass("dark");
        $("#switch").addClass("switched");
        sessionStorage.setItem('darkmode', 'true');
    }
});

})(jQuery);

---

我以前尝试过使用localStorage，但在黑暗模式激活之前刷新页面时出现延迟。

我猜问题在于您使用了

==

符号，并且当您设置

暗模式的值时，您将其指定为“true”，但您检查了它是否为“true”，因此，如果使用符号，这两件事是不一样的

我想你可以这样写：

设定值：

//Switch light/dark
$("#switch").on('click', function() {
    if ($("body").hasClass("dark")) {
        //removes dark mode
        $("body").removeClass("dark");
        $("#switch").removeClass("switched");
        sessionStorage.setItem("darkmode", false);
    }
    else {
        $("body").addClass("dark");
        $("#switch").addClass("switched");
        sessionStorage.setItem("darkmode", true);
    }
});

检查值：

onload = function() {
if(sessionStorage.getItem("darkmode")) {
    sessionStorage.getItem("darkmode");
            $( "body" ).addClass( "dark" );
            $("#switch").addClass("switched");
            sessionStorage.setItem("darkMode", true);
   }
}

尝试使用相同的符号，如果设置了
“
符号，则使用
”
符号而不是
“
”
“在黑暗模式激活之前刷新页面会有延迟。”这是因为您的代码被包装在
onload
事件中。它等待页面完全加载（图像和所有图像）后才能运行。那么它应该是：if（sessionStorage.getItem（“darkmode”）==“true”）{sessionStorage.getItem（“darkmode”）；$（“body”）.addClass（“dark”）；$（“switch”）.addClass（“switched”）；sessionStorage.setItem（“darkmode”，“true”）}好吧，这里的代码太多了，但本质上是的。尝试在这里更改模式，然后重新加载：它可以工作。但是仍然有一点延迟。您可以尝试消除延迟的方法是：将其放在打开的
标记之后。（抱歉，我编辑了该链接，请确保您拥有该版本。如果您想在用户关闭浏览器时“忘记”该设置，请不要忘记将
localStorage
更改为
sessionStorage
）