Javascript куки сохранить и загрузить - PullRequest
Новая
       0

Javascript куки сохранить и загрузить

0 голосов
/ 13 августа 2011

У меня есть этот код JavaScript, который меняет стиль веб-сайта.но этот код меняет стиль только при нажатии на него.и после обновления страницы она возвращается к значению по умолчанию.Я хочу сохранить пользовательские настройки.Мне очень нравится код, и я не хочу менять его на другой.не могли бы вы помочь.Я хочу, чтобы вы дали мне код после добавления к нему кода куки! 

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

    });

});

Ответы [ 2 ]

2 голосов
/ 13 августа 2011

Вы делаете это неправильно.Вы должны добавить класс к элементу верхнего уровня, такому как корень (<html>), и оформить остальную часть документа в соответствии с этим. 

.style1-p {
    background: blue;
}

.style1-div {
    background: red;
}

Должен стать 

.style1 p {
    background-blue;
}

.style1 div {
    background-red;
}

Таким образом, вам нужно изменить только один класс, и весь документ изменится.Это также будет означать, что вам нужно сохранить только один файл cookie (который описывает этот класс) и загрузить его только один раз.

Пример jsFiddle

РЕДАКТИРОВАТЬ: пример jsFiddle обновленчтобы включить Cookies.

EDIT2: пример jsFiddle обновлен для включения нескольких стилей!

0 голосов
/ 13 августа 2011

Файл cookie - это просто пара ключ-значение, поэтому вы можете иметь один файл cookie для каждого элемента, который вы стилизуете, где ключ - это идентификатор, а значение - имя класса. В jQuery вы можете установить их так: 

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

и затем в верхней части вашего документа, готового, у вас будет: 

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

но, предупреждаю, ваш код уже немного запутан, если вы зайдете и начнете устанавливать и удалять файлы cookie повсюду, все будет очень неаккуратно. Я бы порекомендовал попробовать вытащить некоторые функции и настроить шаблон наблюдателя. Кроме того, вам действительно нужен нормальный класс? и если вам действительно нужно избавиться от него, когда вы добавите компактный класс?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...