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

【问题标题】：How can I make a .toggleClass button click keep its effects on different pages?如何使 .toggleClass 按钮单击保持其在不同页面上的效果？
【发布时间】：2016-07-08 00:41:51
【问题描述】：

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

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

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

【问题讨论】：

使用 cookie 保存偏好

标签： javascript jquery css

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

});

【讨论】：