30 ноября 2013
4700
cохранение, cookie, javascript

Cохранение Сookie JavaScript

JavaScript
Демонстрация » Скачать »

В данном уроке будет рассмотрено сохранение в cookie средствами JavaScript и пример использования этого для сохранения состояния страницы.  Для работы с cookie в JavaScript предусмотрен объект document.cookie, который содержит в себе строку со списком всех сохраненных данных в формате «имя1=значение1;имя2=значение2;…».

 

Запись в объект происходит простым методом присваивание, при этом строка не перезаписывается, а новые данные добавляются в конец строки. Помимо этого, в cookie можно записать дополнительные параметры для тех или иных записываемых данных. Эти параметры перечислены ниже.

 

  • path – путь, внутри которого будет доступ к cookie;
  • domain – домен, на котором доступно cookie;
  • expires – дата в формате GMT, до которой будут храниться 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. Благодарю за внимание!