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

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