Как сохранить темный режим в хранилище сессии?

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

Попробуйте использовать тот же знак, если вы установите знак ", тогда получите знак " вместо '.