Javascript cookie保存和加载

javascript cookies save and load

本文关键字：加载 保存 cookie Javascript      更新时间：2023-09-26

我有这个javascript代码来改变网站的风格。但是这段代码只在单击它时才改变样式。刷新页面后，它返回默认值。我希望它保存用户的首选项。我真的很喜欢这个代码，我不想用另一个代码来改变它。你能帮帮我吗?我想让你给我的代码后，添加cookie代码到它!

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

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

.style1-p {
    background: blue;
}
.style1-div {
    background: red;
}

应该成为

.style1 p {
    background-blue;
}
.style1 div {
    background-red;
}

这样，您只需要更改一个类，而整个文档将更改。这也意味着你只需要保存一个cookie(它描述了一个类)，并且只加载它一次。

<标题> jsFiddle例子

编辑:jsFiddle的例子更新，包括cookie。

EDIT2: jsFiddle的例子更新，包括多个样式!

一个cookie只是一个键值对，所以你可以有一个cookie每个元素，你是样式的关键是id和值是类名。在jQuery中，你可以这样设置它们:

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

然后在你的doc ready的顶部你会有:

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

但是警告一下，你的代码已经有点乱了，如果你开始到处设置和取消cookie，事情会变得很乱。我建议尝试取出一些函数，并设置观察者模式。还有，你真的需要上普通的课吗?如果有的话你真的需要在添加精简类时去掉它吗?

相关文章：