Что такое файлы cookie и как с ними работать с помощью JavaScript

? ? ? Не совсем… ??? Лучше! Печенька ? – один из самых популярных смайликов в Интернете, и в то же время это одна из самых важных технологий веба.

Давайте посмотрим, о чем это все, хорошо?

Основы файлов cookie в браузере

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

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

• Имя: _ga
• Значение: 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, такую как дата истечения срока действия и функции безопасности, такие как директива 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)
// ведет запись вроде "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741"

// Этот знак равенства не работает так, как вы ожидаете
document.cookie = "alligator=alligator_cookie_content;"
console.log(document.cookie)
// записывает "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; аллигатор=содержимое_печенья_аллигатора"
// Обратите внимание, что предыдущий фрагмент кода добавляет новое созданное нами куки

// Грубая реализация интерфейса куки может выглядеть так:
const createCookie = (name, value) => document.cookie = name + '=' + value + ';'
// Для реального обновления мы бы сначала проверили, существует ли куки
const updateCookie = (name, value) => document.cookie = name + '=' + value + ';'
const deleteCookie = (name) => document.cookie = name + '=; Max-Age=-1;';  

Типы куки

Сеансовые куки

Сеансовые куки часто относятся к типу куки, которые существуют до закрытия браузера. Чтобы настроить сеансовую куки, вам просто нужно НЕ указывать дату истечения срока годности.

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

Постоянный cookie

Постоянные cookies не удаляются браузером при закрытии пользователем. У этих cookies есть дата истечения, которую вы можете установить на вашем сервере. Вы можете установить срок действия cookie на один день или десять лет.

Cookie от третьих лиц

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

Cookie Max-Age против Expire

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

• Используйте 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 истекать через определенное количество времени (в секундах) после получения клиентом:

// Истекает через один день
const oneDayToSeconds = 24 * 60 * 60;
document.cookie =  'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';

? Вот и все! Надеюсь, теперь у вас есть лучшее представление о том, как использовать файлы cookie на стороне клиента с помощью JavaScript. Если у вас есть вопросы, задайте их нам в Twitter. В следующий раз мы рассмотрим, как управлять сеансами с помощью файлов cookie и Express.js.