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

Question

I am implementing dark mode on my website. I am trying to store the user preference as a session storage but my code does not work.

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

I have tried using localStorage before but there is a delay when refreshing the page before dark mode activates.

Answer 1

I guess it is the problem that you used === sign and when you set the value of darkmode you assigned it 'true' but you checked if it is "true", so these two things are not same if you use === sign.

I think you can write like this:

Set value:

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

Check value:

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

Try to use same sign, if you set with " sign then get with " sign instead of ' .