如何使 .toggleClass 按钮单击以保持其在不同页面上的效果

How can I make a .toggleClass button click keep its effects on different pages?

本文关键字：按钮 toggleClass 何使 单击      更新时间：2023-09-26

我一直在开发一个网站，该网站利用一个按钮在背景/导航栏/文本颜色的正面和负面主题之间切换其整个外观，具体取决于用户的喜好。我已经用一个简单的 toggleClass 方法完成了主页：

 $(document).ready(function(){ 
    $('.switchButton').click(function(){
         $('.mainBg').toggleClass("bg-inv");     
     });
 });

我怎样才能做到当用户加载网站的任何其他页面时，它将以之前选择的主题打开（例如，如果您所在的页面为负数，则在您更改为正数之前，所有这些都将是负数）？我计划在每个页面上插入一个开关，但是每次您想使用第二个主题时都必须轻弹它非常烦人。我想过一个 IF jquery 函数，但不确定如何在不同的页面之间使用它。

HTTP 是无状态的。这意味着连接之间的数据不会被保存，并且每个请求都是基于服务器上代码的新请求。

如果要跨请求保存数据，则必须将其保存在不依赖于请求的位置。这可以是在 cookie、会话变量、数据库中，也可以是使用 localstorage。

您

只能直接从JavaScript访问cookie，因此这将是您最简单的选择。

您可以将值保存在 cookie 中并将其加载到每个页面中，以便它在页面之间保持不变。

在主页上，您可以将值存储在会话存储中，并且在每个页面上，您可以从会话存储变量中检索值。

  $(document).ready(function(){ 
    $('.switchButton').click(function(){
          $('.mainBg').toggleClass("bg-inv");
          sessionStorage.class = "bg-inv";
    });     
});

在每个页面上，您都可以检查变量

$(document).ready(function(){ 
    if(typeof(Storage) !== "undefined") {
          $('.mainBg').addClass(sessionStorage.class);
    }
});

假设你做了一个名为class;的变量。现在在 toggleClass 函数中写class=a其中 a 是你传递给 toggleClass 的变量，在本例中为 bg-inv。 现在，您可以通过localStorage['class'] =class将class保存在本地存储中，并在需要时使用localStorage['class']或localStorage.getItem('class')检索它 希望这有帮助！

相关文章：