Работа в cookie в JavaScript

Работа в cookie в JavaScript


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

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

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

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

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

if (navigator.cookieEnabled === false){                              JS
alert("Cookies отключены!");
}

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

Запись cookies

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

document.cookie = "name=user";                                       JS

Такая установка будет хранится до закрытия браузера. Чтобы продлить время жизни 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";                       JS  

/* или */
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";                      JS 
/* или */
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";                          JS

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

Domain

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

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

Secure

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

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

Чтение cookies

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

document.cookie = "name=user"; document.cookie = Чтение cookies

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

document.cookie = "name=user"; document.cookie = "fullname=Ivanov";document.cookie = "date=10.01.2021"; console.log(document.cookie); // name=user; date=10.01.2021; fullname=Ivanov

Как видно никаких дополнительный данных о куках (expires, path, domain, secure) в document.cookie не содержится.

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

var results = document.cookie.match(/name=(.+?)(;|$)/);console.log(results[1]); // user var results = document.cookie.match(/fullname=(.+?)(;|$)/);console.log(results[1]); // Ivanov var results = document.cookie.match(/date=(.+?)(;|$)/);console.log(results[1]); // 10.01.2021

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

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


Получить все значения cookies в виде объекта:

var obj = {};var cookies = document.cookie.split(/;/);for (var i = 0, len = cookies.length; i < len; i++) { var cookie = cookies[i].split(/=/); obj[cookie[0]] = cookie[1];} console.dir(obj); // {date: "10.01.2021", fullname: "Ivanov", name: "user"}

Удаление 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

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

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

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


Как видно никаких дополнительный данных о куках (expires, path, domain, secure) в document.cookie не содержится.

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

var results = document.cookie.match(/name=(.+?)(;|$)/);console.log(results[1]); // user var results = document.cookie.match(/fullname=(.+?)(;|$)/);console.log(results[1]); // Ivanov var results = document.cookie.match(/date=(.+?)(;|$)/);console.log(results[1]); // 10.01.2021


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

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


Получить все значения cookies в виде объекта:

var obj = {};var cookies = document.cookie.split(/;/);for (var i = 0, len = cookies.length; i < len; i++) { var cookie = cookies[i].split(/=/); obj[cookie[0]] = cookie[1];} console.dir(obj); // {date: "10.01.2021", fullname: "Ivanov", name: "user"}



Удаление 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 =    JS
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

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


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

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

<h4>Страница №1</h4> <div class="form-group"> <label for="example">Выберите любой пункт:</label> <select class="form-control" id="example">  <option>1</option>  <option>2</option>  <option>3</option>  <option>4</option>  <option>5</option> </select></div> <script src="/jquery.min.js"></script><script>$(document).ready(function(){ var selected = document.cookie.match(/select=(.+?);/); if (selected) {  $('#example').val(selected); }  $('#example').change(function(){  document.cookie = "select=" + $(this).val(); });});</script>


Report content on this page

Report Page

Please submit your DMCA takedown request to dmca@telegram.org