Question

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

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

如何制作，以便当用户加载网站的任何其他页面时，它将以之前选择的主题打开（如果您所在的页面处于否定状态，则所有这些都将为负数直到你改为正面）？我计划在每个页面上插入一个开关，但每次你想要使用第二个主题时都不得不轻弹它是非常烦人的。我想过一个IF jquery函数，但我不确定如何在不同的页面之间使用它。

Answer 1

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

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

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

Answer 2

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

Answer 3

在主页上，您可以将值存储在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);
    }

});

Answer 4

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

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

4 个答案: