Работа с cookie в JavaScript

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

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

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

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

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

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

Запись в 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";

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

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

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();
JS

Другие параметры:

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

Чтение кук не совсем удобное, в 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
JS

Как видно никаких дополнительный данных о куках (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
JS

Функция для получения значения 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
JS

Получить все значения 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"}
JS

Удаление данных происходит путём установки новой куки с параметром 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();
JS

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

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";
}
JS

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

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>
HTML
22.01.2021
29282
Предыдущая запись Флаги стран
Следующая запись Local Storage и Session Storage в JavaScript

Комментарии

, чтобы добавить комментарий.

Другие публикации

Сохранить открытую вкладку в Bootstrap Tabs
В данной статье представлены два метода, как сохранить открытую вкладку в Bootstrap Tabs, поле перезагрузки страницы...
4499
+6
Примеры использования cURL в PHP
cURL PHP – это библиотека предназначенная для получения и передачи данных через такие протоколы, как HTTP, FTP, HTTPS....
151087
+20
Массив $_SERVER
Описание значений глобального массива $_SERVER с примерами.
30717
+2
Описание мета-тегов
В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
16044
+3
Использование API Яндекс Диска на PHP
Можно найти множество применений Яндекс Диска на своем сайте, например, хранение бекапов и отчетов, обновление прайсов,...
44283
+16
Работа с FTP в PHP
Протокол FTP – предназначен для передачи файлов на удаленный хост. В PHP функции для работы с FTP как правило всегда доступны и не требуется установка дополнительного расширения.
10268
+1