页面刷新后保持切换类答案

【问题标题】：Keeping toggled class after page refresh页面刷新后保持切换类
【发布时间】：2011-12-05 10:14:20
【问题描述】：

我认为这已经做过很多次了，但是尽管阅读了一些关于 cookie 的帖子，我还是无法理解它。

我有第二个 body 类，整个站点使用不同的字体，当客户端单击链接更改字体时可以访问它。理想情况下，不是逐页进行，而是在访问新页面后新类将“粘住”。我通过 jQuery 的更改类代码如下所示：

$(document).ready(function() {
    $("a#switcher").click(function() {
        $("body").toggleClass("alternate_body");
    });
});

有没有相对简单的方法来实现这一点？提前致谢。

【问题讨论】：

标签： jquery cookies

【解决方案1】：

Cookie 方法

您可以使用 jQuery 插件（例如 jquery-cookie）来简化 cookie 访问。所以你的代码会变成这样来保存类设置：

$(document).ready(function() {
    var body_class = $.cookie('body_class');
    if(body_class) {
        $('body').attr('class', body_class);
    }
    $("a#switcher").click(function() {
        $("body").toggleClass("alternate_body");
        $.cookie('body_class', $('body').attr('class'));
    });
});

网址参数

另一种选择是在页面上的所有链接单击#switcher 时设置 URL 参数以保持状态而不设置 cookie。

【讨论】：

【解决方案2】：

使用 cookie 或 HTML5 引入的全新 local storage。您还可以创建一些服务器会话解决方案，通过 AJAX 调用等方式获取以前的设置。

【讨论】：

【解决方案3】：

您肯定需要为此使用 cookie。

首先您需要下载jQuery cookie plugin 并将其添加到您的页面。

然后在上面的示例中，您需要在 body 类更改时设置 cookie：

$("a#switcher").click(function() {
    $("body").toggleClass("alternate_body");
    $.cookie('bodyClass', 'alternate_body');
});

然后在页面加载时，检查 cookie 并根据需要设置正文类：

$("BODY").addClass($.cookie('bodyClass'));

【讨论】：

【解决方案4】：

您可以在页面刷新后使用 cookie 来保存它。只需将类保存在 cookie 中并在需要时读取它（刷新后）。如果您不知道 cookie 的工作原理，请参考此处的示例：

http://www.electrictoolbox.com/jquery-cookies/

第二种选择是调用一个php函数将其保存到数据库中（我不知道这是为用户登录时使用的吗？）但是您可以将其保存在数据库中以保存并读取它稍后，当有人删除他的互联网历史记录或转到另一台计算机时，他的布局相同。

问候，斯蒂芬。

【讨论】：