Работа с cookies в javascript

Работа с cookie через JavaScript

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

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

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

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

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

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

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

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

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 3 ):

Спасибо за эту новость!

Проблема с функцией deleteCookie(), если кука создавалась к примеру на странице site_name/page1.html , а удаляется на site_name/page2.html то кука не удаляется функция function createCookie(name,value,days) < if (days) < var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); >else var expires = «»; document.cookie = name+»=»+value+expires+»; path=/»; > решает проблему

Здравствуйте. Если задать и вывести пару куков (document.write(document.cookie)), то будет результат: «name=value; name2=value2». Скажите, пожалуйста как обращаться до конкретного кука и отдельно до его значения ?

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

Работа с куки (cookie) в JavaScript

Учебник JavaScript

Практика

Работа с DOM

Практика

Некоторые продвинутые вещи

Рекомендованное ES6

Некоторые видео могут забегать вперед, тк к этому месту учебника мы прошли еще не весь ES6. Просто пропускайте такие видео, посмотрите потом.

Регулярки

Разное

Работа с канвасом

Практика

• урок исключен (мало материала), по аяксу скоро будет отдельный учебник (много материала)
  Работа с
  AJAX в JavaScript —>
  Работа с
  AJAX + PHP —>

Контекст

Drag-and-Drop

• Урок №
  Введение
  в ООП в стиле ES6
• Урок №
  Основы
  работы с ООП
• Урок №
  Наследование
  классов в JavaScript
  Продвинутая работа
  с классами на JavaScript —>
• Урок №
  Применение
  ООП при работе с DOM
• Урок №
  Практика
  по ООП в JavaScript
• Тут скоро будут еще уроки
  по функциональному и прототипному
  стилю ООП.

Практика по ООП

Ваша задача: посмотрите, попробуйте повторить.

Практика

Promise ES6

Библиотека jQuery

Тк. jQuery устаревает, объявляю эти уроки не обязательными и выношу в конец учебника (так по уровню уроки середины учебника, если что). В перспективе переедет в отдельный учебник по jq.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Время жизни

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

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

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

Удаление кук

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

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

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

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

JavaScript и куки (cookie)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Функция для установки куки

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

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

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

Установка куки со сроком хранения до 15 февраля 2011:

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

Функция для удаления куки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вы можете удалить куки нажав на ссылку Забудь обо мне!, которая вызывает функцию delete_cookie() и обновляет страницу, чтобы снова запросить имя у Вас.

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

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com
Перевел: Сергей Фастунов
Урок создан: 15 Июня 2010
Просмотров: 212085
Правила перепечатки

5 последних уроков рубрики «Разное»

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

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

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

Хранение данных

Одну из возможностей сохранения данных в javascript представляет использование куки. Для работы с куками в объекте document предназначено свойство cookie .

Для установки куков достаточно свойству document.cookie присвоить строку с куками:

В данном случае устанавливается кука, которая называется «login» и которая имеет значение «tom32». И в большинстве браузеров мы можем посмотреть ее, узнать всю информацию о ней и в дальнейшем ее можно использовать в приложении:

Строка куки принимает до шести различных параметров: имя куки, значение, срок окончания действия (expires), путь (path), домен (domain) и secure. Выше использовались только два параметра: имя куки и значение. То есть в случае со строкой «login=tom32;» куки имеет имя login и значение tom32.

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

И в этом случае нам надо установить параметр expires , то есть срок действия куков:

То есть срок действия куки login истекает в понедельник 31 августа 2015 года в 00:00. Формат параметра expires очень важен. Однако его можно сгенерировать программно. Для этого мы можем использовать метод toUTCString() объекта Date:

В данном случае срок действия куки будет составлять 4 часа.

Если в друг нам надо установить куки для какого-то определенного пути на сайте, то мы можем использовать параметр path . Например, мы хотим установить куки только для пути www.mysite.com/home:

В этом случае для других путей на сайте, например, www.mysite.com/shop, эти куки будут недоступны.

Если на нашем сайте есть несколько доменов, и мы хотим установить куки непосредственно для определенного домена, тогда можно использовать параметр domain . Например, у нас на сайте есть поддомен blog.mysite.com:

Параметр path=/ указывает, что куки будут доступны для всех директорий и путей поддомена blog.mysite.com.

Последний параметр — secure задает использование SSL (SecureSockets Layer) и подходит для сайтов, использующих протокол https. Если значение этого параметра равно true , то куки будут использоваться только при установке защищенного соединения ssl. По умолчанию данный параметр равен false.

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

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

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

Извлеченные куки не включают параметры expires, path, domain и secure . Кроме того, сами куки разделяются точкой с запятой, поэтому нужно еще провести некоторые преобразования, чтобы получить их имя и значение: