javascript cookie 保存和加载

Question

我有这段 javascript 代码可以改变网站的风格。但此代码仅在您单击它时更改样式。刷新页面后，它会恢复默认状态。我希望它保存用户的偏好。我真的很喜欢这段代码，我不想用另一段代码来改变它。你能帮忙吗？我希望你在添加cookies代码后给我代码！

$(document).ready(function() {
    $("#fullswitch").click(function() {
        $("#chpheader").removeClass("compact");
           $("#imgg").removeClass("compact");
           $("#chpheader").removeClass("original");
        $("#imgg").removeClass("original");
                        $("#chpheader").addClass("normal");
        $("#imgg").addClass("normal");

    });
    $("#compactswitch").click(function() {
        $("#chpheader").addClass("compact");
        $("#imgg").addClass("compact");
        $("#chpheader").removeClass("original");
        $("#imgg").removeClass("original");
        $("#chpheader").removeClass("normal");
        $("#imgg").removeClass("normal");

    });
      $("#originalswitch").click(function() {
        $("#chpheader").addClass("original");
        $("#imgg").addClass("original");
        $("#chpheader").removeClass("compact");
           $("#imgg").removeClass("compact");
                        $("#chpheader").removeClass("normal");
        $("#imgg").removeClass("normal");

    });

});

Answer 1

你做错了。您应该将一个类添加到顶级元素（例如根元素 ()），并根据该元素对文档的其余部分进行样式设置。

.style1-p {
    background: blue;
}

.style1-div {
    background: red;
}

应该变成

.style1 p {
    background-blue;
}

.style1 div {
    background-red;
}

这样，你只需要改变一个类，整个文档就会改变。这也意味着您只需要保存一个 cookie（描述一个类），并且只加载一次。

jsFiddle 示例

编辑：jsFiddle 示例更新为包含 Cookie。

EDIT2：更新了 jsFiddle 示例以包含多种样式！

Answer 2

cookie 只是一个键值对，因此您可以为每个正在设计样式的元素拥有一个 cookie，其中键是 id，值是类名。在 jQuery 中，你可以像这样设置它们：

$("#chpheader").removeClass("compact");
$.cookie("chpheader", $("#chpheader").attr('class'));

然后在你的文档顶部准备好你会：

$(document).ready(function() {
    if($.cookie("#chpheader")) {
         $("#chpheader").set("className", $.cookie("#chpheader"));
    }
         ....

但是警告的话，你的代码已经有点混乱了，如果你进去并开始设置和取消设置 cookie 到处都是会变得非常马虎。我建议尝试提取一些功能，并设置观察者模式。另外，你真的需要正常上课吗？如果你这样做，当你添加紧凑类时你真的需要摆脱它吗？