Как записать cookie в браузер

Обновлено: 06.07.2024

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

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

cookie.set('bla', 'blabla');
cookie.get('bla');

Немножечко теории о механизме предоставляемом 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 указывающим в прошлое, например:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как выбрать хороший хостинг для своего сайта?

Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.

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

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

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

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

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

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

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

Сookies или куки – это данные в виде пар ключ=значение, которые хранятся в файлах на компьютере пользователя.

Для хранимых данных существуют несколько ограничений:

  • Одна пара запись не должна занимать более 4Кб.
  • Общее количество кук на один домен ограничивается примерно 20.

В старых браузерах navigator.cookieEnabled может быть неопределенным.

Запись в document.cookie происходит особым образом, например следующий пример обновит только данные с ключом «name», но при этом не затронет все остальные.

Max-age и Expires

max-age устанавливает время жизни куки в секундах, а параметр expires задает непосредственно дату окончания в формате RFC-822 или RFC-1123 ( Mon, 03 Jul 2021 10:00:00 GMT ).

Следующие примеры устанавливают куки name=user сроком на один месяц:

Куки сроком на год:

Параметр указывает URL-префикс пути т.е. на каких страницах будут доступны установленные куки. Значение path должно быть относительным URL (без домена).

Как правило, в качестве пути указывают корень сайта path=/ , чтобы куки были доступны на всем сайте.

Domain

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

Secure

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

Удаление данных происходит путём установки новой куки с параметром max-age=-1 или expires с прошедшей датой.

Удаление всех кук сайта:

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

Google Chrome

В DevTools (Windows: F12 , MacOS: ⌘ + ⌥ + i ), вкладка «Application», раздел «Storage» – «Cookies».

Mozilla Firefox

В веб-консоли (Windows: F12 , MacOS: ⌘ + ⌥ + k ), вкладка «Хранилище», раздел «Куки».

В примере выполняется сохранение выбранного пункта селекта на нескольких страницах:

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




Свойство document.cookie

Взглянем на классический способ работы с куки. Соответствующая спецификация существует, благодаря Netscape, с 1994 года. Компания Netscape реализовала свойство document.cookie в Netscape Navigator в 1996 году. Вот определение куки из тех времён:

Главу про document.cookie даже можно найти во втором издании книги «Javascript. The Definitive Guide», которое вышло в январе 1997 года. Это было 24 года тому назад. И мы всё ещё пользуемся тем же старым способом работы с куки ради обратной совместимости.

Как же это выглядит?

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

Да, именно так всё и делается. В нашем распоряжении оказывается строка со всеми значениями, хранящимися в куки-файле, разделёнными точкой с запятой.

Как вытащить из этой строки отдельное значение? Если вам кажется, что для этого надо самостоятельно разбить строку на части — знайте, что так оно и есть:


Как узнать о том, когда истекает срок действия какого-нибудь из куки? Да, в общем-то, никак.

А как узнать домен, с которого установлен какой-нибудь куки? Тоже никак.

Установка куки

Вышеприведённая команда позволяет создать куки с именем theme , значением которого является dark . Хорошо. Значит ли это, что document.cookie — это строка. Нет, не значит. Это — сеттер.


Эта команда не перезапишет куки с именем theme . Она создаст новый куки с именем mozilla . Теперь у нас имеются два куки.

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


Да. Это — как раз то, что мне нужно — подбирать дату и время истечения срока действия куки в формате GMT каждый раз, когда нужно установить куки. Ладно, давайте воспользуемся для решения этой задачи JavaScript-кодом:


Но, к счастью, у нас есть и другой способ установки момента истечения срока действия куки:


Свойство max-age представляет собой срок «жизни» куки в секундах. Соответствующее значение имеет более высокий приоритет, чем то, которое задано с помощью свойства expires .

И не надо забывать о свойствах path и domain . По умолчанию куки устанавливаются для текущего расположения и текущего хоста. Если надо установить куки для всего домена — надо будет добавить к команде установки куки конструкцию такого вида:

Удаление куки

Для удаления куки надо установить дату и время истечения срока действия куки на какой-нибудь момент из прошлого. Для того чтобы всё точно сработало бы — тут рекомендуется использовать начало эпохи Unix.

Работа с куки в сервис-воркерах

Это просто невозможно. Дело в том, что работа с document.cookie — это синхронная операция, в результате воспользоваться ей в сервис-воркере нельзя.

Cookie Store API

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

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

Во-вторых — этот API устроен гораздо понятнее, чем существующий механизм работы с куки.

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

Метод getAll возвращает массив, а не строку. Именно этого я и жду, когда пытаюсь получить некий список.


А вот — приятная неожиданность. Можно узнать и дату истечения срока действия куки, и сведения о домене и пути, и при этом не пользоваться никакими хаками.

▍Установка куки


Мне очень нравится этот синтаксис!

▍Удаление куки

Или можно, как раньше, установить дату истечения срока действия куки на некий момент в прошлом, но не вижу причины поступать именно так.

▍События куки

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

▍Сервис-воркеры

Можно ли пользоваться этим API прямо сейчас?

Хотя этим API уже можно пользоваться, но тут надо проявлять осторожность. Cookie Store API работоспособно в Chrome 87+ (Edge 87+, Opera 73+). В других браузерах можно воспользоваться полифиллом, который, правда, не возвращает полной информации о куки, как это сделано в настоящем API. Прогрессивные улучшения — это вещь.

И учитывайте, что спецификация этого API всё ещё находится в статусе «Draft Community Group Report». Но если в вашем проекте важен хороший «опыт разработчика» — попробуйте современный способ работы с куки.

Читайте также: