Куки в 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, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: