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);
   }
}

如果使用"符号设置，请尝试使用相同的符号，然后使用"符号代替'。

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

1 个答案: