Что такое файлы cookie и как их использовать с JavaScript

Введение

Файлы cookie браузера были введены в Интернете для сохранения постоянной информации о пользователе. Первый вариант использования заключался в том, чтобы проверить, посещал ли пользователь ранее веб-сайт Netscape.

Файлы cookie — это строки, содержащие поле имени, поле значения и дополнительные необязательные атрибуты. Значения — это строки, и вы можете хранить все, что считаете нужным для вашего приложения. Google Analytics _ga, вероятно, является one of || the распространенный файл cookie в обращении, как правило, выглядит так:

• Имя: _га
• Значение: GA1.3.210706468.1583989741.
• Домен:.example.com
• Путь: /
• Истекает /Максимальный возраст: 2022-03-12T05:12:53.000Z

Файлы cookie могут хранить до 4096 байт данных (включая имя, значение, домен, дату истечения срока действия и все остальное, что вы можете туда ввести). Вы можете добавить ограниченное количество файлов cookie для каждого домена, которое зависит от браузера.

Как создаются файлы cookie

Существует два основных способа создания файлов cookie:

• С помощью HTTP вы можете отправить Set-Cookie вместе с заголовком ответа HTTP. В зависимости от технологий, которые вы используете для своего веб-сервера; вы можете использовать различные инструменты и библиотеки для управления заголовками файлов cookie. Эти инструменты должны создавать ответы HTTP, которые будут выглядеть примерно так:

HTTP/2.0 200 OK
 Content-type: text/html
 Set-Cookie: alligator_name=barry
 Set-Cookie: tasty_cookie=strawberry... More http Content

Вы можете добавить в свои файлы cookie информацию, такую как expiration date и функции безопасности, такие как директива Secure и флаг HttpOnly.

Set-Cookie: cookie_name=cookie_value; Expires=Wed, 17 Sep 2021 07:00:00 GMT; Secure; HttpOnly

Флаг HttpOnly означает, что файлы cookie не могут быть прочитаны или изменены браузером. А « Secure означает, что файлы cookie могут передаваться только по протоколу HTTPS. Это очень важно для защиты вашего приложения.

• С Javascriptè сложнее управлять файлами cookie. У нас есть интерфейс document.cookie, который хранит наши файлы cookie и может быть переназначен. Например, на сайте, где установлен Google Analytics, в консоли разработчика мы можем сделать:

console.log(document.cookie)
 //logs something like "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741"

 //This equal sign does not work as you expect
 document.cookie = "alligator=alligator_cookie_content;"
 console.log(document.cookie)
 //logs "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; alligator=alligator_cookie_content"
 //Notice that the previous piece of code appends the new cookie we created

 //A rough implementation of a cookie interface could look like this:
 const createCookie = (name, value) => document.cookie = name + '=' + value + ';'
 //For a real update we would first check if the cookie exists
 const updateCookie = (name, value) => document.cookie = name + '=' + value + ';'
 const deleteCookie = (name) => document.cookie = name + '=; Max-Age=-1;';

Типы файлов cookie

Сеансовые файлы cookie

Сеансовые файлы cookie часто относятся к типу файлов cookie, которые существуют до закрытия браузера. Чтобы установить сеансовый файл cookie, достаточно НЕ указывать дату истечения срока действия.

Например, вы можете сохранить имя пользователя в файле cookie. Тот, у кого есть доступ к куки, будет иметь доступ к имени пользователя. Поскольку он находится в файле cookie, нам не нужно добавлять его в наши запросы.

Session cookies — это сбивающее с толку выражение. Файлы cookie сеанса также относятся к файлам cookie, которые вы используете для управления сеансами. Файлы cookie, которые удаляются при закрытии браузера, — это не единственные файлы cookie, которые вы можете использовать для управления сеансом.

Постоянный файл cookie

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

Сторонние файлы cookie

Мы можем отличить файлы cookie, находящиеся в том же домене, от файлов cookie, полученных от сторонних поставщиков. Пример, который мы предоставили ранее с Google Analytics, является примером стороннего файла cookie. Сторонние файлы cookie могут использоваться для отслеживания действий пользователей. Чтобы установить сторонний файл cookie, вам необходимо установить ';domain=thirdpartydomain.com'.

Файлы cookie Max-Age и Expire

Файлы cookie, как правило, являются временными, поэтому вы можете установить точную дату истечения срока действия. У вас есть две стратегии:

• Используйте Expires и установите фиксированную дату истечения срока действия. Дата использует формат даты HTTP: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT. Так, например, если мы хотим, чтобы срок действия нашего файла cookie истекал 17 сентября 2020 года, мы можем сделать:

const jacksBirthday = new Date(2020, 8, 17);
 document.cookie = 'jacksage=27; expires =' + jacksBirthday.toUTCString() + ';';

• Использование « Max-Age » поддерживается не всеми браузерами. Но это самое верное решение. Принудительно истечет срок действия файла cookie в течение определенного периода времени (в секундах) после того, как клиент его получит:

//Expires after one day
 const oneDayToSeconds = 24 * 60 * 60;
 document.cookie = 'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';

Вывод

В этом руководстве мы объяснили, что такое файлы cookie и как их использовать с JavaScript.