Как добавить или удалить Cookie с помощью JavaScript

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 для хранения информации о Ваших посетителях. Спасибо за внимание! :)

Что такое cookies?

Cookies - это технология, позволяющая сайтам сохранять в браузере небольшую порцию данных (до 4Кбайт).

Обычно эти данные используются на сайте для того, чтобы:

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

Как работают cookies

Механизм работы с cookies рассмотрим на следующем примере:

Принцип работы механизма cookies

Клиент (веб-браузер) посылает серверу запрос (запрашивает у него страницу). Если в браузере есть cookies, связанные с этим сайтом, то он их посылает серверу в составе этого запроса.

Сервер получает запрос от клиента. Если в составе запроса есть куки, то их можно использовать для выполнения некоторой логики на сервере, подготовки пользователю персонализированной страницы или для чего-то другого. После этого отправляем клиенту ответ. В заголовке ответа отправляем веб-браузеру (клиенту) cookies, которые ему нужно будет сохранить.

Веб-браузер (клиент) получает ответ от сервера (страницу) и выводит его пользователю. Куки, которые пришли с сервера, браузер сохраняет в своё хранилище.

JavaScript - document.cookie

// получить значения всех cookies страницы var cookies = document.cookie; // выведем куки в консоль браузера console.log(cookies); // выведем с помощью функции alert alert(cookies);

Данное свойство представляет собой строку и чтобы в ней что-то найти, например, определённую cookie (по ключу), её необходимо разобрать. Для этого нужно написать JavaScript код (например, с использованием регулярных выражений) или воспользоваться специально предназначенного для этого библиотекой js-cookie . Данная библиотека, кроме функции чтения куки, имеет также методы для её установки и удаления.

Библиотека js-cookie

js-cookie - библиотека JavaScript, предоставляющая методы для удобной работы с cookies.

Подключение js-cookie к странице Установка (set) cookie Запись cookie осуществляется с помощью функции set: // name - ключ (имя) куки // value - значение, связанное с ключом name // attributes (необязательный параметр) - атрибуты куки в формате объекта Cookies.set("name", "value"[,attributes]); Установить cookie для всех страниц сайта: Cookies.set("nameCookie", "valueCookie"); // => "nameCookie=valueCookie; path=/" Создать cookie, действительную 30 дней (от текущего момента времени) и видимую любыми страницами сайта: Cookies.set("nameCookie", "valueCookie", { expires: 30 }); // => "nameCookie=valueCookie; path=/; expires=Thu, 13 Apr 2017 13:00:15 GMT" Выполнить запись куки, доступ к которой будет иметь только текущая страница (срок хранения 365 дней): Cookies.set("nameCookie", "valueCookie", { expires: 365, path: "" }); // => "nameCookie=valueCookie; expires=Wed, 14 Mar 2018 13:00:36 GMT" Получение (get) куки Чтение значения cookie осуществляется с помощью метода get: Cookies.get("nameCookie"); // => "valueCookie" Cookies.get("otherCookie"); // => undefined Получить все доступные cookies: Cookies.get(); // => {nameCookie: "valueCookie"} Удаление (remove) cookie Для удаления куки предназначена функция remove: Cookies.remove("nameCookie"); Удаление cookie с указанием атрибута path: Cookies.set("name", "value", { path: "" }); Cookies.remove("name", { path: "/" }); // не получится (не правильный путь) Cookies.remove("name", { path: "" }); // удалится (указан правильный путь)

Важно! Когда вы удаляете cookie, вы должны указать тот же самый путь и домен, который использовался для установки cookie. Если атрибуты куки в Cookies.remove не указать, то будут браться те, которые заданы по умолчанию в Cookies.defaults (приведён ниже).

Например, удалим все cookies, имеющие в качастве пути значение "/": path = "/"; var cookies = Cookies.get(); for (var cookie in cookies) { Cookies.remove(cookie, { path: path }); } Установка атрибутов cookies Передача атрибутов при установке куки осуществляется посредством указания их в качестве значения последнего (3) аргумента функции Cookies.set . Cookies.set("name", "value", { expires: 365, path: "/news/", domain: "m.mydomain.ru", secure: true }); // => "name=value; path=/news/; expires=Wed, 14 Mar 2018 12:54:28 GMT; domain=m.mydomain.ru; secure"

expires - указывает длительность хранения cookie в браузере. Значение можно задавать как в формате числа (количество дней от текущего момента времени), так и ввиде даты. Если данный параметр не указать, то cookie будет ссесионным, т.е. он удалится после закрытия браузера.
Например, установим cookie на 30 дней (в качестве формата expires будем использовать дату):
// функция, возвращающая дату, которая будет через указанное количество дней от текущей function getDateExpires(days) { var date = new Date; date.setDate(date.getDate() + days); return date; } // запись cookie nameCookie=valueCookie Cookies.set("nameCookie", "valueCookie", { expires: getDateExpires(30) }); // => "nameCookie=valueCookie; path=/; expires=Thu, 13 Apr 2017 12:34:13 GMT"
path - строка, указывающая путь (по умолчанию: / ), посредством которого будет определяться видимость (доступность) cookie. Cookie для некоторой страницы доступна только тогда, когда её path входит в адрес. По умолчанию куки видимы для всех страниц сайта.
Cookie, которая будет иметь в качестве пути текущее местоположение документа:
Cookies.set("nameCookie", "valueCookie", { path: "" }); // => "nameCookie=valueCookie"
domain - строка, указывающая домен (по умолчанию: текущий), в котором cookie должна быть видна. При этом куки также будут доступны во всех поддоменах этого домена.
secure - устанавливает, необходимо ли при передаче cookies использовать безопасный протокол (https). По умолчанию: false (нет не требуется).
Кроме индивидуальной установки атрибутов куки при каждом вызове функции Cookies.set , их также можно назначить глобально посредством свойства defaults объекта Cookie . Cookies.defaults = { path: "/", expires: 365 }; Cookies.set("nameCookie", "valueCookie"); // => "nameCookie=valueCookie; path=/; expires=Wed, 14 Mar 2018 12:53:23 GMT" Данные атрибуты будут использоваться функцией Cookies.set по умолчанию. Другими словами только тогда, когда вы вызываете функцию Cookies.set без последнего (третьего) параметра.

Куки и формат JSON

Библиотека js-cookie позволяет очень просто установить в качестве значения куки не только текстовое значение, но и данные в формате массива или объекта (а точнее их строковое представление посредством JSON.stringify):

Cookies.set("name", { name1: "value1", name2: "value2" });

Выполнять чтение cookie (имеющей в качестве значения JSON) с помощью функции Cookies.get не очень удобно, т.к. на выходе вы получите обычную строку (а не массив или объект).

Cookies.get("name"); // => "{"name1":"value1","name2":"value2"}" Cookies.get(); // => {name:"{"name1":"value1","name2":"value2"}"}

Для этого можно воспользоваться функцией Cookies.getJSON . Данная функция не только получает cookie, но и разбирает её с помощью JSON.parse:

Cookies.getJSON("name"); // => {name1: "value1", name2: "value2"} Cookies.getJSON("name")["name1"]; // => "value1" Cookies.getJSON("name")["name2"]; // => "value2" Cookies.getJSON(); // => {name: {name1:"value1", name2:"value2"}}

Всем доброго времени суток и поехали. Чем же хороши куки? Да тем, что с помощью их мы можем хранить информацию на стороне клиента, то есть в его браузере. Более того мы хранить информацию определенное количество времени после истечения которого данная информация стереться.

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

Делается это очень просто.

If (navigator.cookieEnabled) { alert("В вашем браузере Cookie включены"); }else{ alert("Включите пожалуста cookie"); }

здесь мы через объект navigator проверяем включены ли в вашем браузере cookie. Если да то едем дальше.

Для того чтобы получить все cookie нам достаточно прописать:

Console.log(document.cookie);

C помощью свойства cookie объекта document мы получаем список всех наших доступных кук и выводим их в консоль. У меня к примеру кук пока нет, поэтому мне возвращается пустая строка.

Давайте создадим свою первую куку. Сделать это можно довольно просто:

Document.cookie = "myFirstCookie=Hello world!";

Поздравляю мы создали куку. Cookie как правило лучше создавать в виде пары имя куки и ее значения. Здесь у нас именем является myFirstCookie, а значением строка Hello world!. Почему так стоит делать? Да потому что, если у нас кук несколько и нам необходимо получить значение одной из них, мы это можем сделать через ее имя.

Имя как бы является указателем через который мы можем обратится к нашей куке и получить ее значение. Пример:

Document.cookie = "two=ok!"; console.log(document.cookie);

здесь мы создали еще одну куку и вывели все наше дело в консоль. В результате у нас в консоли вывелась строка с двумя нашими куками.

myFirstCookie=Hello world!; two=ok!

И теперь давайте напишем небольшую функцию с помощью которой мы можем получать значение определенной куки.

Function getCookie(name){ var arrayAllCookie = document.cookie.split("; "); for(var i in arrayAllCookie){ if(arrayAllCookie[i].split("=") === name){ return arrayAllCookie[i].split("=") } } } console.log(getCookie("myFirstCookie"));

Мы создали функцию getCookie в качестве аргумента которой передаем имя куки значение которой хотим получить.

В результате мы получили Hello world!, то есть значение нашей первой куки, так как в качестве аргумента у нас указано ее имя.

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

Var date = new Date(new Date().getTime() + 10 * 1000); document.cookie = "three=My three cookie; path=/; expires=" + date.toUTCString();

Здесь мы в переменную date запысиваем время когда наша кука будет удалена. В нашем случае она будет удалена через 10 секунд после создания.

Далее при создании куки устанавливаем ей имя three и значение "My three cookie", после пишем следующее "path=/; expires=" и указываем нашу переменную, приведенную к специальному формату UTC, с помощью метода toUTCString().

В результате время работы куки будет равно 10 секундам после истечения которых она будет не действительна(удалена).

Если мы хотим удалить куку вручную, допустим давайте удалим куку myFirstCookie:

Console.log("Результат до: "+document.cookie); var date = new Date(0); document.cookie = "myFirstCookie=; path=/; expires=" + date.toUTCString(); console.log("Результат после: "+document.cookie);

Как видите мы просто выставили текущее время в качестве окончания работы куки в результате чего она была удалена. Заметье что мы указали только имя куки и знак равно упустив значение. И в результате вывели список кук до удаления и после. Как видите мы успешно удалили куку с именем myFirstCookie.

Function setCookie(name, value="",date="") { if(value == "" && date == ""){ /*Если передан один аргумент мы удаляем куку с указанным именем*/ var date = new Date(0); document.cookie = name+"=; path=/; expires=" + date.toUTCString(); return false; } if(date == ""){ /*Если передано два параметра создаем куку с заданными именем и значением, также можно используя имя уже созданной куки менять ее значение*/ document.cookie = name+"="+value; return false; } /*Если переданы все три параметра, то мы также можем создавать куку и менять ее значения, в том числе третим параметром устанавливается время ее жизни в секундах*/ var date = new Date(new Date().getTime() + date * 1000); document.cookie = name+"="+value+"; path=/; expires=" + date.toUTCString(); }

Итак, весь код в функции я тщательно прокомментировал, поэтому пользуйтесь на здоровью.

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

Берегите вашу личную информацию!

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

На этом у меня все. Надеюсь я смог вам помочь в решении вашего вопроса. Желаю успехов и удачи! Пока!

Cookies файлы

Cookies - это небольшие фрагменты именованных данных, сохраняемые веб-браузером и связанные с определенными веб-страницами или веб-сайтами. Cookies первоначально предназначались для разработки серверных сценариев и на низшем уровне реализованы как расширение протокола HTTP. Данные в cookies автоматически передаются между веб-браузером и веб-сервером, благодаря чему серверные сценарии могут читать и записывать значения, сохраняемые на стороне клиента.

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

Поддержка cookies

Cookies пользуются дурной славой у многих пользователей Всемирной паутины из-за недобросовестного использования cookies, связанных не с самой веб-страницей, а с изображениями на ней.

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

Поэтому, прежде чем использовать cookies в сценариях JavaScript, следует проверить, не отключен ли режим их сохранения. В большинстве браузеров это можно сделать, проверив свойство navigator.cookieEnabled . Если оно содержит значение true, значит, работа с cookies разрешена, а если false - запрещена (хотя при этом может быть разрешено использование временных cookies, срок хранения которых ограничивается продолжительностью сеанса работы браузера).

Свойство navigator.cookieEnabled не является стандартным, поэтому если сценарий вдруг обнаружит, что оно не определено, придется проверить, поддерживаются ли cookies, попытавшись записать, прочитать и удалить тестовый cookie.

Атрибуты cookie: срок хранения и область видимости

Помимо имени и значения каждый cookie имеет необязательные атрибуты, управляющие сроком его хранения и областью видимости. По умолчанию cookies являются временными - их значения сохраняются на период сеанса веб-браузера и теряются при закрытии браузера. Чтобы cookie сохранялся после окончания сеанса, необходимо сообщить браузеру, как долго (в секундах) он должен храниться, указав значение атрибута max-age . Если указать срок хранения, браузер сохранит cookie в локальном файле и удалит его только по истечении срока хранения.

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

Если, например, веб-страница http://www.example.com/catalog/index.html создаст cookie, то этот cookie будет также видим страницам http://www.example.com/catalog/order.html и http://www.example.com/catalog/widgets/index.html, но невидим странице http://www.example.com/about.html.

Этого правила видимости, принятого по умолчанию, обычно вполне достаточно. Тем не менее иногда значения cookie требуется использовать на всем многостраничном веб-сайте независимо от того, какая страница создала cookie. Например, если пользователь ввел свой адрес в форму на одной странице, целесообразно было бы сохранить этот адрес как адрес по умолчанию. Для этого в cookie можно определить атрибут path. И тогда любая страница того же веб-сервера с URL-адресом, начинающимся с указанного значения, сможет использовать этот cookie.

Например, если для cookie, установленного страницей http://www.example.com/catalog/widgets/index.html, в атрибуте path установлено значение «/catalog», этот cookie также будет виден для страницы http://www.example.com/catalog/order.html. А если атрибут path установлен в значение «/», то cookie будет видим для любой страницы на веб-сервере http://www.example.com.

По умолчанию cookies доступны только страницам с общим происхождением. Однако большим веб-сайтам может потребоваться возможность совместного использования cookies несколькими поддоменами. Например, серверу order.example.com может потребоваться прочитать значения cookie, установленного сервером catalog.example.com. В этой ситуации поможет атрибут domain. Если cookie, созданный страницей с сервера catalog.example.com, имеет в атрибуте path значение «/», а в атрибуте domain - значение «.example.com», этот cookie будет доступен всем веб-страницам в поддоменах catalog.example.com, orders.example.com и в любых других поддоменах в домене example.com. Если атрибут domain не установлен, его значением по умолчанию будет имя веб-сервера, на котором находится страница. Обратите внимание, что в атрибут domain нельзя записать значение, отличающееся от домена вашего сервера.

Последний атрибут cookie - это логический атрибут с именем secure , определяющий, как значения cookie передаются по сети. По умолчанию cookie не защищен, т.е. передается по обычному незащищенному HTTP-соединению. Однако если cookie помечен как защищенный, он передается, только когда обмен между браузером и сервером организован по протоколу HTTPS или другому защищенному протоколу.

Сохранение cookies

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

имя=значение

Например:

Document.cookie = "version=" + encodeURIComponent(document.lastModified);

При следующем чтении свойства cookie сохраненная пара имя/значение будет включена в список cookies документа. Значения cookie не могут содержать точки с запятой, запятые или пробельные символы. По этой причине для кодирования значения перед сохранением его в cookie, возможно, потребуется использовать глобальную JavaScript-функцию encodeURIComponent(). В этом случае при чтении значения cookie надо будет вызвать соответствующую функцию decodeURIComponent().

Записанный таким способом cookie сохраняется в течение сеанса работы веб-браузера, но теряется при его закрытии пользователем. Чтобы создать cookie, сохраняющийся между сеансами браузера, необходимо указать срок его хранения (в секундах) с помощью атрибута max age. Это можно сделать, присвоив свойству cookie строку следующего формата:

имя=значение; max-age=число_секунд

Следующая функция устанавливает cookie с дополнительным атрибутом max-age:

// Сохраняет пару имя/значение в виде cookie, кодируя значение с помощью // encodeURIComponent(), чтобы экранировать точки с запятой, запятые и пробелы. // Если в параметре daysToLive передается число, атрибут max-age // устанавливается так, что срок хранения cookie истекает через // указанное число дней. Если передать значение 0, cookie будет удален function setCookie(name, value, daysToLive) { var cookie = name + "=" + encodeURIComponent(value); if (typeof daysToLive === "number") cookie += "; max-age=" + (daysToLive*60*60*24); else throw new Error("Параметр daysToLive должен быть числом."); document.cookie = cookie; }

Аналогичным образом можно установить атрибуты path, domain и secure, дописав к значению cookie строки следующего формата перед его записью в свойство cookie:

; path=путь; domain=домен; secure

Чтобы изменить значение cookie, установите его значение снова, указав то же имя, путь, домен и новое значение. При изменении значения cookie можно также переопределить срок его хранения, указав новое значение в атрибуте max-age.

Чтобы удалить cookie, установите его снова, указав то же имя, путь, домен и любое произвольное (возможно пустое) значение, а в атрибут max-age запишите 0.

Чтение cookies

Когда свойство cookie используется в JavaScript-выражении, возвращаемое им значение содержит все cookies, относящиеся к текущему документу. Эта строка представляет собой список пар имя=значение, разделенных точками с запятой и пробелами. Значение не включает какие-либо атрибуты, которые могли быть установлены для cookie. При работе со свойством document.cookie обычно приходится использовать метод split(), чтобы разбить его значение на отдельные пары имя/значение.

После извлечения значения cookie из свойства cookie его требуется интерпретировать, основываясь на том формате или кодировке, которые были указаны создателем cookie. Например, cookie можно передать функции decodeURIComponent(), а затем функции JSON.parse().

В примере ниже определяется функция getCookie(), которая анализирует свойство document.cookie и возвращает объект, свойства которого соответствуют парам имя/значение всех cookies в документе:

// Возвращает cookies документа в виде объекта с парами имя/значение. // Предполагается, что значения cookie кодируются с помощью // функции encodeURIComponent() function getCookies() { // Возвращаемый объект var cookies = {}; // Получить все cookies в одной строке var all = document.cookie; // Если получена пустая строка, вернуть пустой объект if (all === "") return cookies; // Разбить на пары имя/значение var list = all.split("; "); for(var i = 0; i

Ограничения cookies

Cookies предназначены для сохранения небольших объемов данных серверными сценариями, которые должны передаваться на сервер при обращении к каждому соответствующему URL-адресу. Стандарт, определяющий cookies, рекомендует производителям браузеров не ограничивать количество и размеры сохраняемых cookies, но браузеры не обязаны сохранять в сумме более 300 cookies, 20 cookies на один веб-сервер или по 4 Кбайт данных на один cookie (в этом ограничении учитываются и значение cookie, и его имя). На практике браузеры позволяют сохранять гораздо больше 300 cookies, но ограничение на размер 4 Кбайт для одного cookie в некоторых браузерах по-прежнему соблюдается.

Сегодня поработаем с Cookie силами JavaScript. "Для чего это можеть быть нужно?" - спросите вы. Да, для чего угодно, например мы вносим какие-то правки в код и не хотим, чтобы изменения были видны пользователям, очевидное решение сделать проверку на наличие куки у клиента, и если кука есть, то показывать наше изменения этому пользователю. Но как ее повесить только определенному пользователю? Для этого мы и будем использовать JavaScript.

Что такое Cookie?

Cookie(куки) - текстовые файлы ограниченные размером до 4кб, в которые браузер записывает данные полученные от веб серверов(сайтов на которые вы заходили). Могут содержать любую ифнормацию, но в основном хранят такие данные которые позволяют запоминать сайтам своих посетителей, например чтобы на запрашивать данные для авторизации или сохранить информацию о товарах добавленных в корзину. Хранятся данные фалйлы на стороне клиента.

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

Как добавить свою куку силами JS.

Добавить свою куку очень просто. Выполним в консоли document.cookie = "user=Nikola"; Готово, наша кука добавлена. Теперь рассмотрим ряд важных настроек, нужно стараться их указывать, чтобы не использовать настройки по умолчанию.

1. path=/mypath - путь по которому будет доступны cookie, если не указывать, то возмется текущий путь и пути ниже него, поэтому в качестве значения возьмем path=/ т.е. корень, куки доступен со всех страниц сайта.

2. expires - Дата истечения жизни cookie в формате GMT. Если дату не указывать, то куки будут считаться ссессионными и будут удалены после закрытия браузера.

Напишем простую функцию для добавления cookie.

Function setCookie(name, value, days, path) { path = path || "/"; // заполняем путь если не заполнен days = days || 10; // заполняем время жизни если не получен параметр var last_date = new Date(); last_date.setDate(last_date.getDate() + days); var value = escape(value) + ((days==null) ? "" : "; expires="+last_date.toUTCString()); document.cookie = name + "=" + value + "; path=" + path; // вешаем куки } setCookie("user","Nikola", 2, "/"); // запустим функциию и добавим куки.

Как удалить куки с помощью JS.

Для удаления Cookie необходимо задать ей прошлую дату. Например воспользуемся нашей функцией setCookie(); и удалим нашу куку user;

setCookie("user","Nikola", -2, "/");

Кука удалена, но что делать если нужно удалить все куки какие есть? Для этого напишем новую функцию.

Function deleteCookie() { var del_co = document.cookie.split(";"); while(name = del_co.pop()) { setCookie(name.split("="),"11", -20, "/"); } }