Как получить cookie javascript

Работа с cookie в JavaScript

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

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

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

Проверка включены ли cookies в браузере

Чтобы узнать, включены ли cookies в браузере пользователя до их использования, можно проверить свойство navigator.cookieEnabled (содержит true или false ).

if (navigator.cookieEnabled === false)

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

Запись cookies

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

Такая установка будет хранится до закрытия браузера. Чтобы продлить время жизни cookies есть два типа параметров:

Max-age и Expires

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

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

document.cookie = "name=user;max-age=2629743"; /* или */ var cookie_date = new Date(); cookie_date.setMonth(cookie_date.getMonth() + 1); document.cookie = "name=user;expires=" + cookie_date.toUTCString();

document.cookie = "name=user;max-age=31556926"; /* или */ var cookie_date = new Date(); cookie_date.setYear(cookie_date.getFullYear() + 1); document.cookie = "name=user;expires=" + cookie_date.toUTCString();

Path

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

Например, установка кук для страницы http://example.com/admin/ и всех её дочерних:

document.cookie = "name=user;path=/admin";

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

Domain

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

document.cookie = "name=user;domain=example.com";

Secure

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

document.cookie = "name=user;secure";

Чтение cookies

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

Удаление cookies

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

document.cookie = "user=;max-age=-1"; /* или через expires */ var cookie_date = new Date(); cookie_date.setMonth(cookie_date.getMonth() - 1); document.cookie = "name=user;expires=" + cookie_date.toUTCString();

var cookies = document.cookie.split(/;/); for (var i = 0, len = cookies.length; i < len; i++) < var cookie = cookies[i].split(/=/); document.cookie = cookie[0] + "=;max-age=-1"; >

Отладка и просмотр cookies в браузерах

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

Google Chrome

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

Mozilla Firefox

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

Страница №1
 
Выберите любой пункт: 1 2 3 4 5  
   

Источник

JavaScript и куки (cookie)

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

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

 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 ru">Данный код выполняет точно такое же действие, как и предыдущий пример, но для установки даты используется метод 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 ru">Данный код устанавливает куки 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", "Вася Пупкин" ); 
 
Установка куки со сроком хранения до 15 февраля 2011:
 
 set_cookie ( "username", "Вася Пупкин", 2011, 01, 15 ); 
 
Установка куки со сроком хранения, доменом ruseller.com , использованием SSL, но без пути:
 
 set_cookie ( "username", "Вася Пупкин", 2003, 01, 15, "", "ruseller.com", "secure" ); 
 
Функция для удаления куки.
 
Другая полезная функция для работы с куки представлена ниже. Функция "удаляет" куки из браузера посредством установки срока хранения на одну секунду раньше текущего значения времени.
 
 function delete_cookie ( cookie_name ) < var cookie_date = new Date ( ); // Текущая дата и время cookie_date.setTime ( cookie_date.getTime() - 1 ); document.cookie = cookie_name += "=; expires ru">Для использования данной функции нужно только передать ей имя удаляемого куки:
 
 delete_cookie ( "username" ); 
 
Получение значения куки
 
Для того, чтобы получить значение предварительно установленного куки для текущего документа, нужно использовать свойство document.cookie :
 
Таким образом возвращается строка, которая состоит из списка пар имя/значение, разделенных точкой с запятой для всех куки, которые действуют для текущего документа. Например:
 
 "username=Вася; password=abc123" 
 
В данном примере 2 куки, которые были предварительно установлены: username , который имеет значение "Вася" , и password , который имеет значение "abc123" .
 
Функция для получения значения куки
 
Обычно, нам нужно только значение одного куки за один раз. Поэтому строка куки не удобна для использования! Здесь приводится функция, которая обрабатывает строку document.cookies , возвращет только то куки, которое представляет интерес в конкретный момент:
 
 function get_cookie ( cookie_name )
 
Данная функция использует регулярное выражение для поиска имени куки, которое представляет интерес, а затем возвращает значение, которое обработано функцией unescape() для перекодирования к нормальному символьному виду. (Если куки не найдено, возвращается значение null.)
 
Данная функция проста в использовании. Например, для возврата значения куки username :
 
 var x = get_cookie ( "username" ); 
 
Простой пример использования
 
В данном примере мы сделали страницу, которая запрашивает Ваше имя при первом посещении, затем она сохраняет Ваше имя в куки и показывает его при следующих посещениях.
 
Откройте страницу в новом окне. При первом посещении она попросит ввести имя и сохранит его в куки. Если Вы посетите страницу еще раз, она отобразит на экране введенное имя из куки.
 
Для куки задаем срок хранения в 1 год от текущей даты, это означает, что браузер сохранит Ваше имя даже если Вы закроете его.
 
Вы можете удалить куки нажав на ссылку Забудь обо мне!, которая вызывает функцию delete_cookie() и обновляет страницу, чтобы снова запросить имя у Вас.
 
Вы можете посмотреть код страницы в браузере, выбрав функцию просмотра исходного кода. Здесь приводится основная часть кода:
 
Данный урок показал Вам, как использовать куки в JavaScript для хранения информации о Ваших посетителях. Спасибо за внимание! 🙂
 
Данный урок подготовлен для вас командой сайта ruseller.com 
Источник урока: www.elated.com 
Перевел: Сергей Фастунов 
Урок создан: 15 Июня 2010 
Просмотров: 255681 
Правила перепечатки 
 
5 последних уроков рубрики "Разное"
 
Как выбрать хороший хостинг для своего сайта?
 
Выбрать хороший хостинг для своего сайта достаточно сложная задача. Особенно сейчас, когда на рынке услуг хостинга действует несколько сотен игроков с очень привлекательными предложениями. Хорошим вариантом является лидер рейтинга Хостинг Ниндзя — Макхост.
 
 Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг - это будущее Ваших сайтов
 
Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.
 
 
Разработка веб-сайтов с помощью онлайн платформы Wrike
 
Создание вебсайта - процесс трудоёмкий, требующий слаженного взаимодействия между заказчиком и исполнителем, а также между всеми членами коллектива, вовлечёнными в проект. И в этом очень хорошее подспорье окажет онлайн платформа Wrike.
 
Источник