Question

我在jquery中使用toggleClass编写了一个函数。该功能通过按钮调用。我设法将其结果保存在会话存储中，因此在刷新页面时，将保存页面上的暗对比度。当我切换回切换状态时，会发生问题。然后，会话存储会自动加载以前的设置，结果我仍然有暗对比度。我试图用另外两种方式编写此脚本，以使其正常运行，但不幸的是，没有取得积极的结果。如果你们中有人能帮助我，我将非常感谢。我已经尝试了几个小时了。

我的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");                        
    });                                                                        
});

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

1 个答案: