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

Question

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

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，但是在激活暗模式之前刷新页面时会出现延迟。

Answer 1

我想这是您使用===符号的问题，当您设置darkmode的值时，您将其分配为“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);
   }
}

尝试使用相同的符号，如果你设置了" sign then get with "符号而不是' 。