≡× МЕНЮ

• Windows 7
• Windows 8
• Windows XP
• Windows общее
• Железо

Код яваскрипт для работы с куки. Cookies — установка. Функция для удаления куки

Подготовил: Андрей Косяк Дата публикации: 22.12.2010

В первой статье Cookies — печем печеньки мы смотрели на куки с дальней дистанции, поэтому если ты разобрался в общих понятиях и назначении cookies — можно приступать непосредственно к выпечке (вот и духовочку я раздобыл), поэтому, надеваем кулинарный колпак и подходим поближе. Будем выпекать!

Арт. подготовка

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

"cookieName = cookieValue; expires = Fri, 21 Jan 2021 06:10:00 GMT; path = /; domain = lessons.сайт; secure = true; "

Условия существования куки оговариваются пятью параметрами (парами ключ=значение) (ВАЖНО! После каждого должен стоять символ-разделитель ";"), рассмотрим их:

Начинка куки

"cookieName =cookieValue;" — основной параметр куки, без него кука теряет свой смысл. Здесь cookieName — уникальное имя для куки, а cookieValue — информация (значение), которую она будет хранить. Забегая немного вперед, скажу, что в качестве значения может быть что угодно, любая, удобная тебе, структура хранимых данных (да хоть JSON), а также какие угодно символы. Единственная пара, которая является обязательной при установке куки.

Время жизни

"expires =Fri, 21 Jan 2021 06:10:00 GMT" — эта пара хоть и необязательна, но играет очень важную роль, наряду с первой. Этот параметр определяет время жизни куки, а именно, с точностью до секунды, в указанную дату, кука «прикажет долго жить». Если этот параметр не указать, то кука будет действительна только в течение сессии, а это значит, что при закрытии браузера она будет удалена.

Важным моментом является формат даты. Дата должна быть задана ТОЛЬКО в текстовом формате (Fri, 21 Jan 2021 06:10:00 GMT). Снова, забегая немного вперед, скажу, что в этом нам поможет объект Date, в нем есть все необходимые инструменты.

Путь установки

"path =/" — этим параметром задается путь (каталог), для которого действительна кука. Сейчас path имеет значение "/", это ничто иное, как корневой каталог, поэтому кука будет доступна для чтения абсолютно всем каталогам сайта. В случае если доступ к куке должен быть ограничен, то параметр path просто не указываем или указываем в нем общий родительский каталог, и кука будет установлена для конкретного каталога, но специфика такова, что кука будет доступна всем его подкаталогам, в то же время — не видна смежным и родительским каталогам.

Для чего это? Представим элементарную ситуацию: интернет-кафе, сначала пришел пользователь Вася, поработал со своей страницей в соцсети, а после него пришел Петя и, на том же компьютере, в той же сети, поработал со своей страницей. Страницы участников находятся в одном домене, но лежат, как правило, в смежных каталогах. К примеру: страница Васи — http://socset.com/vasya, страница Пети — http://socset.com/petya. Можно представить, какой будет хаос, если куки будут устанавливаться в корневой каталог: Вася сможет оперировать куками Пети и наоборот. Я думаю ни одному, ни другому такой вариант не понравится. Поэтому, в данном случае, будет уместно, если куки будут привязаны только к каталогу конкретного пользователя, следовательно, ко всем его подкаталогам.

Домен

"domain =lessons.сайт" — эта пара определяет домен, в котором действительны куки. Как правило, явно использовать приходится редко. Ситуация с этим параметром похожа на ситуацию с параметром path, с той разницей, что в Domain мы оперируем доменами и сабдоменами а не каталогами. Т.е., в данном случае, куки установленные для сабдомена lessons..сайт.. Если параметр не указан, то по умолчанию используется доменный адрес документа.

Безопасность

"secure =true" — параметр безопасности. Если этот параметр установлен в true, браузер отправит куки только тому серверу, который запросит их по безопасному каналу (SSL). Этот параметр также используется редко. По умолчанию принимает значение false.

Первый блин комом?

Вот теперь попробуем угостить наш браузер печенюшкой. В этом нам поможет объект document.cookie:

Document.cookie = "firstCookie=Первый блин комом?; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;";

Результат можно увидеть, открыв в своем браузере раздел куки или же банально:

Document.cookie = "firstCookie=Первый блин комом?; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;"; alert(document.cookie);

И совсем и не комом! Все гуд, кука на месте.

Заметка

Обращаю внимание на особенность браузеров на WebKit. Они отказываются ставить куки, если документ открыт локально. Я, обычно, в таких случаях пользуюсь локальным сервером, так же он понадобится при работе с AJAX. Поэтому, как говорится, маст хэв! К примеру, Denwer (ссылка в конце статьи).

Больше cookies

C одной кукой разобрались. А как быть, если нужно хранить, к примеру, данные из формы (логин, e-mail, номер телефона и т.п.)? В таком случае можно поступить так:

Document.cookie = "myLogin=Мой логин; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;"; document.cookie = "[email protected]; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;"; document.cookie = "myPhone=1234567; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;";

Таким образом, имеем три куки, которые хранят соответственно логин, электронный ящик и номер телефона. Но ты же помнишь, об ограничениях на количество куков от одного домена, впрочем, как и их общего количества? Значит, таким способом мы можем хранить только ограниченное количество значений для полей. А если такое ограничение "связывает" нам руки, мы можем поступить так:

Var formData = escape("Мой логин;[email protected];1234567"); document.cookie = "myFormCookie="+formData+"; expires=Fri, 21 Jan 2021 06:10:00 GMT; path=/;";

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

Зачем функция escape? Все довольно просто, она кодирует значение куки в 16-ричное представление. Для чего? Во-первых, браузер отправляет куки серверу, а для того, чтоб данные одинаково могли быть прочтены на серверах под любыми системами, используется данная кодировка. Во-вторых, если мы, используя разделитель ";" в переменной со значениями полей, не закодируем эту строку, то кука, по меньшей мере, просто не правильно установится, ведь разделитель ";" используется для отделения параметров самой куки. Этот момент нужно взять на вооружение и, впредь, использовать по-умолчанию при передаче информации (cookie, AJAX).

"…и время ни на миг не остановишь"

Теперь разберемся с параметром expires. Неудобство в том, что до этого момента мы прописывали время жизни для куки вручную. Но, в реальных условиях, такой подход практически не применим. Как минимум, потому, что при каждом очередном заходе на сайт, время жизни куков должно продлеваться на какой-то фиксированный строк, что, вобщем-то, оправдано и логично. Поэтому в данном вопросе нам полностью поможет объект Date:

Var formData = escape("Мой логин;[email protected];1234567"); cookieExp = new Date(); // создаем объект Date cookieExp.setMonth(cookieExp.getMonth()+1); // устанавливаем текущий месяц и к нему добавляем еще один document.cookie = "myFormCookie="+formData+"; expires="+cookieExp.toGMTString()+"; path=/;";

Такими действиями мы установили время жизни куки ровно в 1 месяц. Подробно на объекте Date в этой статье оснавливаться не буду, лишь опишу схему установки срока:

• строка 2: объявляем cookieExp как объект Date. Теперь cookieExp содержит текущую дату;
• строка 3: переустановка в cookieExp месяца. При помощи метода getMonth извлекаем текущий месяц и прибавляем к нему еще один. В итоге в cookieExp запишется следующий месяц;
• строка 6: в этой строке используем метод toGMTString(), для перевода даты в текстовый формат;

Таким образом, в зависимости от того, какое время жизни для куки нужно установить, можно использовать и другие методы объекта Date: от get/setMilliseconds() до get/setFullYear() (от получения/установки миллисекунд до получения/установки года).

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

Вывод

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

Куда дальше

• следующая — Cookies — извлечение
• предыдущая —

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

На картинке видно, что в cookie присутствует строка wordpress_logged_in_263d663a02379b7624b1028a58464038=admin. Это значение находится в незашифрованном виде в файле cookie и его легко перехватить с помощью утилиты Achilles, но как правило в большинстве случаев в Achilles можно увидеть лишь хеш той или иной записи. Перед отсылкой запроса на сервер можно попытаться заменить эту строку на любую подобную (хотя в данном случае смысла нет) - количество попыток не ограничено. Затем, отослав этот запрос на сервер с помощью кнопки Send, можно получить ответ от сервера, предназначаю­щийся администратору.

В предыдущем примере можно использовать прямую подмену идентификатора пользователя. Кроме того, название параметра, подмена значения которого предоставляет дополнительные возможности хакеру, может быть следующим: user (например, USER=JDOE), любое выражение со строкой ID (например, USER=JDOE или SESSIONID=BLAHBLAH), admin (например, ADMIN=TRUE), session (например, SESSION=ACTIVE), cart (например, CART=FULL), а также такие выражения, как TRUE, FALSE, ACTIVE, INACTIVE. Обычно формат файлов cookie очень зависит от приложения, для нужд которого они используются. Однако приведенные советы по поиску изъянов приложений с помощью файлов cookie годятся практически для всех форматов.

Меры противодействия извлечению информации из файлов cookie, выполняемые на стороне клиента

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

Компания Kookaburra Software разработала инструмент, облегчающий использование файлов cookie. Называется инструмент CookiePal (http://www.kburra.com/cpal.html (см. www.kburra.com) ). Данная программа предназначена для предупреждения пользователя при попытке Web-узла установить на машину файл cookie, при этом пользователь может разрешить или запретить это действие. Подобные функции блокирования файлов cookie на сегодня есть во всех браузерах.

Еще одной причиной регулярной установки обновлений Web-броузера, является постоянно выявляемые изъяны системы безопасности этих программ. Так, Бенет Хэйзелтон (Bennet Haselton) и Джеми МакКарти (Jamie McCarthy) создали сценарий, который после щелчка на ссылке извлекает файлы cookie с машины клиента. В результате становится доступным все со­держимое файлов cookie, которые находятся на машине пользователя.

Взлом подобного рода может быть также осуществлен с помощью дескриптора , встраиваемого в HTML-текст на Web-странице (или в HTML-содержимое электронного письма или рассылки групп новостей) для похищения файлов cookie. Рассмотрим следующий пример:

Для того, чтоб подобные вещи не грозили нашим личным данным, сам так делаю и всем советую всегда обновлять ПО, работающее с HTML-кодом (e-mail клиенты, медиа-проигрыватели, браузеры и т.д.).

Многие предпочитают просто блокировать получение файлов cookie, однако, большинству Web-узлов для просмотра необходима поддержка cookie. Вывод – если в скором будущем появится инновационная технология, позволяющая обходится без cookie, программисты и администраторы с облегчением вздохнут, а пока cookie остается лакомым куском для хакера! Это действительно так, поскольку более качественной альтернативы пока не существует.

Меры противодействия, выполняемые на стороне сервера

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

Конечно же, важно понимать, что файлы cookie могут использоваться в целях обеспече­ния безопасности Web-серверов для осуществления авторизации пользователей. Если все же разрабатываемому приложению необходимо использовать файлы cookie, то этот механизм следует настроить таким образом, чтобы при каждом сеансе использовались различные клю­чи с коротким периодом действия, а также стараться не помещать в эти файлы информацию, которая может быть использована хакерами для взлома (такую как ADMIN=TRUE).

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

Я использовал Facebook login для идентификации пользователей. Когда приходит новый пользователь, я храню его идентификатор пользователя в своей базе данных. В следующий раз, когда они придут, я узнал их идентификатор Facebook, и я знаю, какой пользователь находится в моей базе данных.

теперь я пытаюсь сделать то же самое с OAuth2 от Google, но как я могу распознать пользователей?

Google отправляет мне несколько кодов и токенов (access_token, id_token, refresh_token), однако ни один из них не является постоянным. Это означает, что если я выйду из системы и вернусь через 2 минуты позже, все 3 значения изменились. Как я могу однозначно идентифицировать пользователя?

Я использую их клиентскую библиотеку PHP:https://code.google.com/p/google-api-php-client/

6 54

Nathan H

6 ответов:

как уже упоминалось, вы можете отправить GET to https://www.googleapis.com/oauth2/v3/userinfo , используя токен носителя OAuth2, который вы только что получили, и вы получите ответ с некоторой информацией о пользователе (id, имя и т. д.).

также стоит отметить, что Google реализует OpenID Connect и что эта конечная точка информации о пользователе является только одной ее частью.

OpenID Connect - это уровень аутентификации поверх OAuth2. При обмене авторизацией code в конечной точке токена Google вы получаете токен доступа (access_token параметр), а также маркер идентификатора OpenId Connect (

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

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

Или можно показать пользователю баннер с кнопкой "не показывать 1 день". По нажатию на эту кнопку баннер скрывается, но в куки пишется информация о моменте времени, когда это произошло - и ровно через сутки баннер покажется опять.

Кроме того, с куками можно работать не только из JavaScript, но и из PHP (там это нужно, например, для хранения авторизации пользователя), см. работа с куками на PHP при необходимости.

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

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

Итак, давайте приступим.

Основы работы с куками

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

В document.cookie куки хранятся просто в виде строки. Эта строка состоит из пар имя_куки=значение_куки , которые перечисляются через точку с запятой с пробелом "; ".

Пример: "name=Вася; age=25" .

Чтобы записать в куки, нужно просто в document.cookie присвоить куку с ее именем:

Document.cookie = "name=Вася";

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

Document.cookie = "name=Вася"; alert(document.cookie); //выведет "name=Вася" document.cookie = "age=25"; alert(document.cookie); //выведет "name=Вася; age=25"

Если устанавливать куку с тем же именем в разные значения - новое значение будет затирать предыдущее:

Document.cookie = "name=Вася"; alert(document.cookie); //выведет "name=Вася" document.cookie = "name=Дима"; alert(document.cookie); //выведет "name=Дима"

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

Получение куки по ее имени

Итак, мы уже определи, что куки хранятся в виде простой строки, например, "name=Вася; age=25; salary=1000". Получается, чтобы найти, к примеру, значение куки с именем age, его нужно достать из это строки каким-нибудь способом: к примеру функциями работы со строками или регулярными выражениями.

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

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

Document.cookie = "age=25"; var age = document.cookie.match(/age=(.+?);/); alert(age); //выведет 25

Однако, эта регулярка не идеальна и при некоторых условиях может или не работать, или работать не правильно.

Во-первых , в нашей регулярке в конце стоит точка с запятой - разделитель разных кук в document.cookie. Но посмотрим внимательно на нашу строку с куками - "name=Вася; age=25; salary=1000" - у последней куки нету точки с запятой в конце! И наша регулярка эту куку не возьмет.

Нужно ее модифицировать и сказать, что кука заканчивается или точкой с запятой, или концом строки. Модифицируем: /age=(.+?)(;|$)/ .

Во-вторых , следует дописать часть регулярки перед именем куки - перед этим именем может быть пробел или начало строки, если кука первая. Допишем: /(^|\s)age=(.+?)(;|$)/ .

Значение куки может быть пустым, к примеру, если мы в document.cookie записывали вот так: "age=". Учтем это в нашей регулярке - заменим + на *. Заменим: /(^|\s)age=(.*?)(;|$)/ .

Давайте теперь введем несохраняющие скобки, чтобы не плодить лишних карманов: /(?:^|\s)age=(.*?)(?:;|$)/ .

А теперь давайте реализуем функцию getCookie() , которая параметром будет принимать имя произвольной куки и возвращать ее значение. Вот эта функция:

Function getCookie(name) { var matches = document.cookie.match(new RegExp("(?:^|\s)" + name + "=(.*?)(?:;|$)";)); return matches; }

Однако, у нас есть проблема: ведь в переменной name могут быть специальные символы (команды регулярных выражений), которые сломают нашу регулярку. Давайте заэкранируем все эти символы (заменим их на их же, но с экранирующем обратным слешем спереди):

Name = name.replace(/([.$\/?*+\\{}|()\[\]^])/g, "\\$1") + "=(.*?);

С учетом этого исправления получим следующее:

Function getCookie(name) { var matches = document.cookie.match(new RegExp("(?:^|\s)" + name.replace(/([.$?*+\\\/{}|()\[\]^])/g, "\\$1") + "=(.*?)(?:;|$)";)); return matches; }

Теперь разберемся с matches . Если кука существует - все хорошо, а вот если не существует - давайте вернем undefined :

If (matches) {return matches;} else {return undefined;}

Перепишем этот if в сокращенный вариант:

Return matches ? matches : undefined;

С учетом исправления получим следующий код:

Function getCookie(name) { var matches = document.cookie.match(new RegExp("(?:^|\s)" + name.replace(/([.$?*+\\\/{}|()\[\]^])/g, "\\$1") + "=(.*?)(?:;|$)";)); return matches ? matches : undefined; }

Теперь учтем, что некоторые браузеры выполняют url кодирование кук и раскодируем их обратно с помощью decodeURIComponent:

Function getCookie(name) { var matches = document.cookie.match(new RegExp("(?:^|\s)" + name.replace(/([.$?*+\\\/{}|()\[\]^])/g, "\\$1") + "=(.*?)(?:;|$)";)); return matches ? decodeURIComponent(matches) : undefined; }

Это и есть готовая функция для получения нужной вам куки (взята отсюда learn.javascript.ru/cookie , я просто чуть подправил регулярку и объяснил как она работает).

Дополнительные настройки кук

Это еще не все: у кук есть дополнительные настройки, которые чаще всего желательно указать.

Эти настройки указываются после пары ключ=значение , каждое – после точки с запятой. Как-то так:

Document.cookie = "name=Вася; настройка1=значение1; настройка2=значение2";

Папка установки

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

Например: ваш сайт site.ru и вы, находясь на странице site.ru/folder/ установили куку. Так вот: эта кука будет доступна на странице site.ru/folder/, на странице site.ru/folder/subfolder/ и так далее, но не будет доступна, к примеру на странице site.ru/somefolder/.

Это очень неожиданное поведение. Чтобы исправить его существует настройка path . Обычно она используется так: path=/ - и кука устанавливается на всем сайте. Пример:

Document.cookie = "name=Вася; path=/";

Можно указать и конкретную папку, например path=/folder :

Document.cookie = "name=Вася; path=/folder";

Домен установки

Следующая настройка domain задает домен, для которого установлена кука. По умолчанию это текущий домен (но не его поддомены). Можно указать, что кука доступна именно на поддомене. К примеру, наш домен site.ru, а куку мы установим для forum.site.ru:

Document.cookie = "name=Вася; path=/; domain=forum.site.ru";

Если указать специальную маску .site.ru , то кука будет доступна на сайте и всех его поддоменах:

Document.cookie = "name=Вася; path=/; domain=.site.ru";

Время жизни

Все куки живут только определенное время. По умолчанию куки живут очень не долго - всего лишь до закрытия браузера. Чаще всего нас это не устраивает и мы хотели бы сделать куки более долгоживущими.

Для этого применяется настройка expires , в которую следует задавать момент времени, до которого живет кука. Этот момент устанавливается в формате GMT. Этот формат можно получить так: используем объект Date, устанавливаем в любое время, а потом вызываем метод toUTCString.

Давайте установим время жизни куки +1 день от текущего момента :

Var date = new Date; date.setDate(date.getDate() + 1); date = date.toUTCString(); document.cookie = "name=Вася; path=/; expires="+date;

Удаление кук

Куки удаляются интересным образом: нужно установить время их жизни в прошедшее время, ну или просто поставить его как -1 . Давайте удалим нашу куку:

Document.cookie = "name=; path=/; expires=-1";

Библиотеки для работы с куками

Так как работа с куками в JavaScript реализована просто ужасно, существуют библиотеки, которые упрощают работу с ними. Изучите эти библиотеки самостоятельно.