Сookies или куки – это данные в виде пар ключ=значение, которые хранятся в файлах на компьютере пользователя.
Для хранимых данных существуют несколько ограничений:
- Одна пара запись не должна занимать более 4Кб.
- Общее количество кук на один домен ограничивается примерно 20.
Чтобы узнать, включены ли cookies в браузере пользователя до их использования, можно проверить свойство navigator.cookieEnabled (содержит true или false).
if (navigator.cookieEnabled === false){
alert("Cookies отключены!");
}В старых браузерах navigator.cookieEnabled может быть неопределенным.
Запись в document.cookie происходит особым образом, например следующий пример обновит только данные с ключом «name», но при этом не затронет все остальные.
document.cookie = "name=user"; Такая установка будет хранится до закрытия браузера. Чтобы продлить время жизни 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";Чтение кук не совсем удобное, в 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"}Удаление данных происходит путём установки новой куки с параметром 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";
}Просмотр, редактирование и удаление кук доступно в браузерах, в панелях для разработчиков:
Google Chrome
В DevTools (Windows: F12, MacOS: ⌘ + ⌥ + i), вкладка «Application», раздел «Storage» – «Cookies».
Mozilla Firefox
В веб-консоли (Windows: F12, MacOS: ⌘ + ⌥ + k), вкладка «Хранилище», раздел «Куки».
В примере выполняется сохранение выбранного пункта селекта на нескольких страницах:
<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>
