更改切换状态时如何删除会话存储？

Question

我使用toggleClass在jquery中编写了一个函数。该函数通过按钮调用。我设法将其结果保存在会话存储中，因此在刷新页面时会保存页面上的暗对比度。当我切换回切换状态时会出现问题。然后会话存储会自动加载以前的设置，结果我仍然有暗对比度。我尝试以其他两种方式编写此脚本以使其正常工作，但不幸的是没有积极的结果。如果你们中的任何人能够帮助我，我将不胜感激。几个小时以来，我一直试图理解这一点。我的 jQuery 代码：$(document).ready(function(){    var state = sessionStorage.getItem("toggleState");    if(state == "true"){        $('*').not('div.container *').toggleClass("black-contrast");                     $('header').toggleClass("black-contrast-border");        $('img, div.container').toggleClass("overlay");    }    $('#black-contrast').click(function(){        $('*').not('div.container *').toggleClass("black-contrast");                     $('header').toggleClass("black-contrast-border");        $('img, div.container').toggleClass("overlay");    });});我试着这样做：$(document).ready(function(){    $('*').not('div.container *').toggleClass(sessionStorage.toggled);    $('#black-contrast').on('click',function(){        if (localStorage.toggled != "black-contrast" ) {            $('*').not('div.container *').toggleClass("black-contrast", true );            localStorage.toggled = "black-contrast";        } else {            $('*').not('div.container *').toggleClass("black-contrast", false );            localStorage.toggled = "";        }    });});

Answer 1

我认为问题在于 onclick 回调函数您没有切换sessionStorage.toggleState

每次用户单击按钮时，您都需要切换 sessionstorage.toggleState。

像这样试试

$(document).ready(function() {                                               

    var state = sessionStorage.getItem("toggleState");                         

    if (state == "true") {                                                     

        $('*').not('div.container *').toggleClass("black-contrast");            

        $('header').toggleClass("black-contrast-border");                      

        $('img, div.container').toggleClass("overlay");                        

    }                                                                          

                                                                               

    $('#black-contrast').click(function() {                                    

        const state = sessionStorage.getItem("toggleState");                   

        state ? sessionStorage.removeItem("toggleState") : sessionStorage.setItem("toggleState");

        $('*').not('div.container *').toggleClass("black-contrast");            

        $('header').toggleClass("black-contrast-border");                      

        $('img, div.container').toggleClass("overlay");                        

    });                                                                        

});