В данном уроке будет рассмотрено сохранение в cookie средствами JavaScript и пример использования этого для сохранения состояния страницы. Для работы с cookie в JavaScript предусмотрен объект document.cookie, который содержит в себе строку со списком всех сохраненных данных в формате «имя1=значение1;имя2=значение2;…».
Запись в объект происходит простым методом присваивание, при этом строка не перезаписывается, а новые данные добавляются в конец строки. Помимо этого, в cookie можно записать дополнительные параметры для тех или иных записываемых данных. Эти параметры перечислены ниже.
Дела с чтением cookie обстоят несколько сложнее, так как document.cookie возвращает полную строку со всеми данными. Для большего удобства, можно создать функцию, которая будет находить значение при помощи регулярного выражения:
function getCookie(name)
{
var result = document.cookie.match(new RegExp("(?:^|; )" +
name.replace(/([.$?*|{}()[]/+^])/g, '$1') + "=([^;]*)"));
return result ? result[1] : undefined;
}
Кроме этого можно создать функцию для записи cookie, чтобы избежать лишней возни с датой, так как если не указывать свойство expires, то cookie будет храниться лишь, до закрытия браузера.
Функция записи представлена ниже.
function setCookie(name, value, options)
{
// если была указана дата
if(options.expires)
{
var date = new Date();
// установка даты в милисикундах
date.setTime(date.getTime() +
/* таким образом, входной параметр expires
будет представлять собой количество дней,
которое будут храниться cookie */
1000*60*60*24 * options.expires);
options.expires = date.toUTCString();
}
// строка, которая будет записана в cookie
var forSave = name + '=' + value;
// добавление всех указанных свойств
for(var key in options)
{
forSave += ';' + key + '=' + options[key];
}
// запись в cookie
document.cookie = forSave;
}
Для удаления cookie достаточно произвести запись с «просроченной» датой:
setCookie(name, value, {expires: -1 });
В данном случае значение может оставаться пустым, так как оно не будет сохранено.
На этом приготовления к работе с cookie завершены. Можем приступать к сохранению состояния страницы. У меня само изменение состояния происходит за счет добавления /удаления класса элементам по средствам следующего кода:
$('#wrap>li>h2').on('click', function(event)
{
var parent = $(this).parent('#wrap>li');
parent.toggleClass('show');
}
Визуальные же изменения происходят благодаря селекторам, согласно которым стили элемента переопределяются в том случае, если у элемента задан класс «show». Эти селекторы приведены ниже.
.arrow{
/* исходные стили */
}
#wrap .show .arrow{
/* результирующие стили */
}
Кроме того, в моем примере вместе с добавлением/удалением класса происходит эффект свертывания:
$('#wrap>li>h2').on('click', function(event){
var parent = $(this).parent('#wrap>li');
parent.toggleClass('show');
if(parent.hasClass('show')){
parent.children('.content').slideDown(1000);
}
else
{
parent.children('.content').slideUp(1000);
}
});
Теперь только остается фиксировать в cookie изменение состояния элементов. Для этого при проверке наличия класса show, помимо применения эффекта, производим запись либо же удаление cookie:
if(parent.hasClass('show')){
parent.children('.content').slideDown(1000);
setCookie(parent.attr('id'), "show", {expires: 10 });
}
else
{
parent.children('.content').slideUp(1000);
setCookie(parent.attr('id'), '', {expires: -1 });
}
Так же не забудем, что при загрузке страницы необходимо считать cookie и расставить все классы по местам:
$('#wrap>li').each(function(index, element) {
if(getCookie($(element).attr('id')) == "show")
{
$(element).addClass('show');
}
if($(element).hasClass('show'))
{
$(element).children('.content').slideDown(0);
}
});
В принципе, все объяснил как хотел. В прошлом, был уже написан один урок, тоже работающий на технологии cookie, можете посмотреть тематику изменение цвета фона на JavaScript. Благодарю за внимание!