Полное руководство по работе с cookies в JavaScript

Я слышал, что англичане предпочитают бисквиты печеньям… странно.

Но пора сосредоточиться.

Содержание

1. Что такое Cookie
2. Управление сессиями
3. Персонализация
4. Отслеживание
5. Типы Cookies
   • Session cookies
   • Permanent cookies
   • Third-party cookies
   • Flash cookies
   • Zombie cookies
   • Secure cookies
6. Как создать cookie на JavaScript
   • JavaScript Cookie
   • Установка
   • Атрибуты cookie
   • Создание cookie
   • Чтение cookie
   • Удаление cookie

Что такое Cookie

Cookie (куки) — это небольшие фрагменты информации, сохраненные в текстовых файлах в браузере. Cookies связывают информацию с определенным пользователем и используются для достижения различных целей.

Основные цели использования cookies:

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

Типы Cookies

Session Cookies

Session cookies (сессионные куки) также известны как temporary cookies (временные куки). Они позволяют веб-сайтам распознавать пользователей и информацию, предоставляемую при навигации по разделам и страницам сайта. Сессионные куки удаляются при закрытии браузера, если не включено автоматическое восстановление сеанса.

Permanent Cookies

Permanent cookies (постоянные куки) сохраняются даже после закрытия браузера. Такие куки могут хранить логин и пароль пользователя, позволяя ему не авторизоваться при каждом посещении сайта.

Third-party Cookies

Third-party cookies (сторонние куки) создаются третьими лицами для сбора и анализа информации о пользователях, таких как поведение, демографические данные и расходы. Они часто используются рекламодателями для таргетинга аудитории.

Flash Cookies

Flash cookies, также известные как super cookies (супер куки), не зависят от браузера и предназначены для постоянного хранения на компьютере пользователя, оставаясь даже после удаления всех других куки.

Zombie Cookies

Zombie cookies (зомби куки) — это разновидность flash cookies, которые автоматически пересоздаются после удаления. Их трудно обнаружить или изменить, поэтому они часто используются для профилактики читинга в онлайн-играх, но также могут быть использованы для установки вредоносных программ.

Secure Cookies

Secure cookies (безопасные куки) могут создаваться только сайтами, использующими HTTPS. Они содержат зашифрованные данные и часто используются для онлайн-оплаты, повышая безопасность транзакций.

Как создать cookie на JavaScript

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

В JavaScript можно создавать, читать и удалять куки с помощью свойства document.cookie.

Создание Cookie

document.cookie = "name=John Doe";

document.cookie = "name=John Doe; expires=Wed, 1 Oct 2022 12:00:00 UTC";

document.cookie = "name=John Doe; expires=Wed, 1 Oct 2022 12:00:00 UTC; path=/";

npm install js-cookie --save

import Cookies from 'js-cookie';

Cookies.set('name', 'value');
Cookies.set('name', 'value', { expires: 7 });
Cookies.set('name', 'value', { expires: 7, path: '', secure: true });

import Cookies from 'js-cookie';

Cookies.set('theme', 'dark');
Cookies.get('theme'); // => 'dark'

Cookies.set('theme', 'light');
Cookies.get(); // => { theme: 'light' }

Cookies.remove('theme');

Cookies.set('direction', 'north', { path: '' });
Cookies.remove('direction'); // fail!
Cookies.remove('direction', { path: '' }); // removed!