Хранение данных

Куки

Последнее обновление: 08.11.2023

Одну из возможностей сохранения данных в браузере представляет использование куки. Так, каждый раз, когда мы обращаемся к веб-странице в интернете, то веб-сервер вместо с этой страницей присылает связаные с этой страницей куки (при их наличии). И браузер хранит эти данные некоторое время. При последующих обращениях к той же странице или сайту в зависимости от настроек куки обратно посылаются из браузера на сервер.

Для работы с куками в языке JavaScript в объекте document предназначено свойство cookie.

Для установки куки достаточно свойству document.cookie присвоить строку с куками:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<script>
document.cookie = "login=tom32;";
console.log(document.cookie);
</script>
</body>
</html>

В данном случае устанавливается куки, которая называется "login" и которая имеет значение "tom32". Затем получаем куки и выводим их на консоль.

Но стоит отметить, что работа с куками может различаться от того, какой браузер используется, и как запускается веб-страница: как локальный файл или как файл на веб-сервере. Например, если мы запустим веб-страницу как локальный файл, то есть просто бросим выше определенную веб-страницу в браузер Mozilla FireFox или Safari, то браузер установит куки и выведет их на консоль. Браузеры поддерживают просмотр установленных кук (как и других сохраненных данных). Например, если брать Mozilla FireFox, то в инструментах разработчика есть вкладки "Хранилище" (в русскоязычной локализации), и и там можно посмотреть куки:

Установка куки в JavaScript в Mozilla FireFox

Однако в других браузерах, например, в Google Chrome или Opera на установку куки в веб-страницах, которые представляют локальные файлы, действуют ограничения. Соответственно, если мы бросим выше определенную страницу в Google Chrome, то консоль нам ничего не отобразит. Потому что Google Chrome по умолчанию поддерживает установку кук только в веб-страницах, которые загружаются с веб-сервера и принадлежат некоторому домену в сети. Что в принципе неудивительно. Ведь куки предназначены прежде всего для пересылки данных по протоколу http от клиента серверу и обратно.

Поэтому в дальнейшем для работы с куками мы располагать html-страницы на веб-сервере. В данном случае воспользуемся самым простым вариантом - Node.js, так как эта технология двольно проста, доступна для всех основных операционных систем и также также позволяет использовать javascript для создания приложений. Но естественно перед созданием приложения необходимо установить Node.js. В данном случае не потребуется никаких знаний node.js, весь используемый код подробно описывается. Но опять же вместо node.js это может быть любая другая технология сервера - php, asp.net, python и т.д. либо какой-то определенный веб-сервер типа Apache или IIS.

Итак, создадим в файловой системе папку для файлов веб-сервера. Например, в моем случае это папка C:\app. Далее в этой папке определим файл сервера. Пусть он будет называться server.js и будет иметь следующий код:

const http = require("http");
const fs = require("fs");
   
http.createServer(function(_, response){
     
	fs.readFile("index.html", (_, data) => response.end(data));

}).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));

Это самый примитивный сервер, который достаточен для нашей задачи. Вкратце пробежимся по коду. Сначала подключаются пакеты с функциональностью, которую мы собираемся использовать:

const http = require("http");	// для обработки входящих запросов
const fs = require("fs");		// для чтения с жесткого диска файла index.html

Для создания сервера применяется функция http.createServer(). В эту функцию передается функция-обработчик, которая вызывается каждый раз, когда к серверу приходит запрос. Эта функция имеет два параметра: request (содержит данные запроса) и response (управляет отправкой ответа). Первый параметр не используется, поэтмоу вместо него указан прочерк _.

В функции-обработчике отправляем файл index.html, который мы дальше определим:

fs.readFile("index.html", (error, data) => response.end(data));

Для считывания файлов применяется встроенная функция fs.readFile(). Первый параметр функции - адрес файла (в данном случае предполагается, что файл index.html находится в одной папке с файлом сервера server.js). Второй параметр - функция, которая вызывается после считывания файла и получет его содержимое через свой второй параметр data. Затем считанное содежимое также может быть отпавлено с помощью функции response.end(data).

В конце с помощью функции listen() запускаем веб-сервер на 3000 порту. То есть сервер будет запускаться по адресу http://localhost:3000/

И также в той же папке определим файл index.html со следующим кодом:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<script>
document.cookie = "login=tom32;";
console.log(document.cookie);
</script>
</body>
</html>

Здесь, как уже было рассмотрено выше, устанавливается куки login. Затем куки выводятся на консоль.

Теперь в консоли перейдем к папке сервера с помощью команды cd и запустим сервер с помощью команды node server.js

C:\app>node server.js
Сервер запущен по адресу http://localhost:3000

После запуска сервера мы можем перейти в браузере по адресу http://localhost:3000, нам отобразится страница index.html. С помощью инструментов браузера мы сможем посмотреть установленные куки. Так, в Google Chrome это вкладка Application, а в левой части пункт Storage -> Cookies:

Установка куки и их просмотр в JavaScript

Установка параметров куки

Строка куки принимает до шести различных параметров:

  • Имя и значение куки

    Имя не чувствительно к регистру, что означает, что, например, login и Login относятся к одному и тому же файлу cookie. В качестве значений разрешены только строки (а не, скажем, числа). Имя и значение — единственные обязательные компоненты. Указывать остальную информацию необязательно (если она не указана, используются значения по умолчанию).

  • Срок окончания действия (параметр expires)

    Дата истечения срока действия, до которой файл cookie действителен. По истечении указанной здесь даты срок действия файла cookie истекает, файл cookie удаляется и больше не отправляется на сервер. Если при создании файла cookie не указана дата истечения срока действия, он удаляется по умолчанию при завершении сеанса браузера.

  • Путь (параметр path) и домен (параметр domain)

    Используются для разграничения куки. Например, файл cookie с доменом www.localhost.com отправляется только с запросами к этому домену. Файл cookie с доменом www.localhost.com и путем /home отправляется только с запросами на www.localhost.com/home, но не на www.localhost.com/about.

  • Параметр secure

    Флаг безопасности, который можно использовать, чтобы дополнительно указать, следует ли отправлять файлы cookie только при соединениях, использующих протокол Secure Sockets Layer (SSL), например, чтобы разрешить отправку по https. Если этот параметр установлен, куки могут быть посланы по адресу https://www.localhost.com, а при запросах по адресу посланы по адресу http://www.localhost.com такие куки НЕ посылаются.

Выше использовались только два параметра: имя куки и значение:

document.cookie = "login=tom32;";

То есть в данном случае куки имеет имя login и значение tom32.

Параметр expires

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

И в этом случае нам надо установить параметр expires, то есть срок действия куков:

document.cookie = "login=tom32;expires=Sun, 31 Dec 2023 23:59:00 GMT;";

То есть срок действия куки login истекает в понедельник 31 декабря 2023 года в 23:59. Формат параметра expires очень важен. Однако его можно сгенерировать программно. Для этого мы можем использовать метод toUTCString() объекта Date:

const expire = new Date();
expire.setHours(expire.getHours() + 4);
document.cookie = "login=tom32;expires=" + expire.toUTCString() + ";";

В данном случае срок действия куки будет составлять 4 часа.

Путь и домен

Если в друг нам надо установить куки для какого-то определенного пути на сайте, то мы можем использовать параметр path. Например, мы хотим установить куки только для пути http://localhost:3000/home:

document.cookie = "login=tom32;expires=Sun, 31 Dec 2023 23:59:00 GMT;path=/home;";

В этом случае для других путей на сайте, например, http://localhost:3000/about, эти куки будут недоступны. Однако стоит отметить, что эта кука будет установлена, если мы обращаемся по пути http://localhost:3000/home.

Если на нашем сайте есть несколько доменов, и мы хотим установить куки непосредственно для определенного домена, тогда можно использовать параметр domain. Например, у нас на сайте есть поддомен blog.mysite.com:

document.cookie = "login=tom32;expires=Sun, 31 Dec 2023 23:59:00 GMT;path=/;domain=blog.mysite.com;";

Параметр path=/ указывает, что куки будут доступны для всех директорий и путей поддомена blog.mysite.com.

Параметр secure

Последний параметр - secure задает использование SSL (SecureSockets Layer) и подходит для сайтов, использующих протокол https. Если значение этого параметра равно true, то куки будут использоваться только при установке защищенного соединения ssl. По умолчанию данный параметр равен false.

document.cookie = "login=tom32;expires=Sun, 31 Dec 2023 23:59:00 GMT;path=/;secure=true;";

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

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

const expire = new Date();
expire.setHours(expire.getHours() + 4);

document.cookie = "language=JavaScript;expires="+expire.toUTCString()+";";
document.cookie = "company=Localhost;expires="+expire.toUTCString()+";";
document.cookie = "login=tom32;";

console.log(document.cookie);

Здесь были установлены три куки, и консоль браузера выведет нам все эти куки:

language=JavaScript; company=Localhost; login=tom32

Извлеченные куки не включают параметры expires, path, domain и secure. Кроме того, сами куки разделяются точкой с запятой, поэтому нужно еще провести некоторые преобразования, чтобы получить их имя и значение:

const cookies = document.cookie.split(";");
for(cookie of cookies){

	const parts = cookie.split("=");
	console.log("Имя куки:", parts[0]);
	console.log("Значение:", parts[1],"\n\n");
}

Ограничения куки

Все файлы cookie для соответствующего домена и соответствующего пути отправляются с каждым запросом, что влияет на объем пересылаемых данных. Кроме того, файлы cookie, отправляемые по протоколу HTTP (а не по безопасному протоколу HTTPS), передаются в незашифрованном виде, что представляет угрозу безопасности в зависимости от типа передаваемой информации. Еще одним ограничением файлов cookie является разрешенный размер памяти в 4 КБ.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850