Куки в JavaScript (cookie)

В JavaScript есть метод document.cookie (в переводе "cookie" = "печенька"), который позволяет считывать и устанавливать значение куки, а так же задавать им время жизни. В document.cookie данные хранятся в виде строки, то есть все куки слеплены в одну строку и разделяются только точкой с запятой ";". К примеру:
NAME=Mouse; FOOD=Cheese;

Создание и изменение

Чтобы создать (записать) или изменить значение куки, используется такой JavaScript код:
document.cookie = 'NAME=Cat';
Сначала ставится название куки (в примере это 'NAME'), а затем после знака равно значение куки (в примере это 'Cat'). Если кука с таким названием уже была, то она перезапишется. Можно создавать/перезаписывать только по одной куки за раз.
Вы можете просматривать и редактировать куки прямо в браузере, с помощью средств разработчика. Читайте подробнее об этом в статье "Редактор cookie в вашем браузере".
Помимо названия и значения, у куки есть три параметра - это адрес сайта "domain" и адрес страницы сайта "path", к которому она привязана, а так же время истечения её действия "expires", после которого кука удалится. Попробуем задать эти два параметра: сделаем куки для всего сайта, установив в "path" слеш "/", а в продолжительности жизни "expires" надо поставить следующий день, но выраженный в формате UTC (к примеру, Fri, 04 Oct 1957 19:28:34 GMT).
var date = new Date;
date.setDate(date.getDate() + 1); // прибавляем один день
date = date.toUTCString(); // преобразуем в формат UTC
document.cookie = 'NAME=Cat; path=/; expires=' + date;
В этом примере мы получили текущую дату, прибавили один день и перевели в формат UTC. А полученное значение записали в дату окончания работы куки. Как только эта дата подойдёт, то кука самостоятельно удалится.

Чтение

Попробуем прочитать куки. Для этого используем тот же самый метод document.cookie:
console.log( document.cookie );
Как можно будет заметить, этот код выдаст в консоль значение куки в виде строчки. К примеру:
NAME=Mouse; FOOD=Cheese;
Но если нам надо получить название определённой куки, то необходимо обработать эту строку и вытащить из неё одно необходимо значение. К сожалению, в JavaScript нет встроенного механизма для этого, поэтому приходится использовать самописные функции. Предлагаем одну из самых распространённых. Попробуем с помощью этой функции достать значение куки с названием 'FOOD':
function getCookie(name) {
   var value = "; " + document.cookie;
   var parts = value.split("; " + name + "=");
   if (parts.length == 2) return parts.pop().split(";").shift();
}

var a = getCookie('FOOD');
console.log( a );
В параметр функции getCookie необходимо передавать название куки. Функция возвращает значение куки с заданным названием. В итоге, при выполнении такого кода в консоли появится значение куки с названием 'FOOD':
Cheese

Удаление куки

Чтобы удалить куки, необходимо задать им значение времени жизни равное текущей секунде или раньше. Либо вообще поставить "-1", чтобы не высчитывать. Тогда браузер автоматически удалит такую куку. Продемонстрируем это:
document.cookie = 'NAME=; path=/; expires=-1';
Из-за того, что во времени жизни куки будет стоять "-1", браузер сразу же удалит её, потому что время жизни вышло.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, покупка SSL сертификатов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: