В этом руководстве вы узнаете о файлах cookie HTTP и о том, как использовать JavaScript для эффективного управления файлами cookie.
Что такое файл cookie?
Файл cookie HTTP — это фрагмент данных, который сервер отправляет веб-браузеру. Затем веб-браузер сохраняет файл на компьютере пользователя и отправляет его обратно на тот же сервер в последующих запросах.
Файл cookie HTTP также известен как веб-файл или файл браузера. И его обычно называют куки.
Например, заголовок HTTP-ответа может выглядеть так:
HTTP/1.1 200 OK Content-type: text/html Set-Cookie:username=admin ...
Ответ HTTP устанавливает файл cookie с именем "username" и значением "admin". Сервер кодирует как имя, так и значение при отправке файла cookie в веб-браузер.
Веб-браузер сохраняет эту информацию и отправляет ее обратно на сервер через HTTP-заголовок Cookie для следующего запроса следующим образом:
GET /index.html HTTP/1.1 Cookie: username=admin ...
Почему используются куки?
Важно понимать, что HTTP не имеет состояния. Когда вы отправляете на сервер два последовательных HTTP-запроса, между ними нет связи. Другими словами, сервер не может знать, исходят ли эти два запроса от одного и того же веб-браузера.
Таким образом, файл cookie используется, чтобы определить, поступили ли два запроса из одного и того же веб-браузера.
На практике файлы cookie служат следующим целям:
- Управление сеансом — файлы позволяют управлять любой информацией, которую должен запомнить сервер. Например, логины, корзины покупок и т. д.
- Персонализация — файлы позволяют сохранять пользовательские настройки, темы и настройки, характерные для пользователя.
- Отслеживание — файлы cookie помогают записывать и анализировать поведение пользователей в рекламе.
Сведения о файлах
Файл cookie состоит из следующей информации, сохраняемой веб-браузером:
- Имя — уникальное имя, которое идентифицирует файл cookie. Имена файлов нечувствительны к регистру. Это означает, что
Usernameиusernameявляются одними и теми же файлами. - Значение – строковое значение файла cookie. Он должен быть закодирован в URL.
- Домен — домен, для которого действителен файл.
- Путь — путь без домена, для которого должен быть отправлен на сервер. Например, вы можете указать, что файл доступен только с https://js-ts-node.github.io/javascript-dom, поэтому страницы https://js-ts-node.github.io/ не будут отправлять информацию о файле.
- Срок действия — отметка времени, указывающая, когда веб-браузер должен удалить файл cookie (или когда браузер должен прекратить отправку файла на сервер). Дата истечения срока действия задается как дата в формате GMT:
Wdy, DD-Mon-YYYY HH:MM:SS GMT. Срок действия позволяет сохранять файлы cookie в веб-браузерах пользователей даже после того, как пользователи закроют веб-браузеры. - Безопасный флаг — если указан, веб-браузер отправляет файл на сервер только через SSL-соединение(
https, а неhttp)
Имя, значение, домен, путь, срок действия и флаг безопасности разделяются точкой с запятой и пробелом. Например:
HTTP/1.1 200 OK Content-type: text/html Set-Cookie:user=john ; expire=Tue, 12-December-2030 12:10:00 GMT; domain=js-ts-node.github.io; path=/dom; secure ...
Обратите внимание, что secure флаг — это единственная часть, которая не является парой имя-значение.
Файлы
Для управления файлами cookie в JavaScript используется свойство document.cookie.
1) Получить значение
В следующем примере возвращается строка всех файлов cookie, доступных на странице:
const str = document.cookie;
document.cookie возвращает серию пар «имя-значение», разделенных точкой с запятой, например:
name1=value1
;name2=value2;...В следующем примере показаны файлы cookie веб-страницы:
"_ga=GA1.2.336374160.1600215156; dwf_sg_task_completion=False;
_gid=GA1.2.33408724.1600901684"Поскольку все имена и значения закодированы в URL-адресе, вам необходимо использовать decodeURIComponent() для их декодирования.
2) Установить cookie
Чтобы установить значение для файла cookie, вы составляете текст файла в следующем формате:
name=value; expires=expirationTime; path=domainPath; domain=domainName; secure
Добавить его в файл cookie:
document.cookie = cookieText;
Для файла cookie требуется только имя и значение. Например:
document.cookie = "username=admin";
В этом примере создается файл cookie с именем username, который имеет значение admin. Веб-браузер будет отправлять этот файл каждый раз, когда он делает запрос на сервер.
Поскольку в файле cookie не указано время истечения срока действия, он будет удален при закрытии веб-браузера.
Текст файла "username=admin" не содержит символов, которые необходимо кодировать.
Однако рекомендуется всегда использовать функцию encodeURIComponent() при настройке файла cookie следующим образом:
document.cookie = `${encodeURIComponent("username")}=${encodeURIComponent("admin")}`;3) Удалить
Чтобы удалить файл cookie, вам необходимо снова установить файл cookie с тем же именем, путем, доменом и параметром безопасности. И вам нужно установить дату истечения срока действия на какое-то время в прошлом.
Класс файлов
Следующий класс Cookie устанавливает, получает и удаляет файл:
class Cookie {
static get(name) {
const cookieName = `${encodeURIComponent(name)}=`;
const cookie = document.cookie;
let value = null;
const startIndex = cookie.indexOf(cookieName);
if (startIndex > -1) {
const endIndex = cookie.indexOf(';', startIndex);
if (endIndex == -1) {
endIndex = cookie.length;
}
value = decodeURIComponent(
cookie.substring(startIndex + name.length, endIndex)
);
}
return value;
}
static set(name, value, expires, path, domain, secure) {
let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
if (expires instanceof Date) {
cookieText += `; expires=${expires.toGMTString()}`;
}
if (path) cookieText += `; path=${path}`;
if (domain) cookieText += `; domain=${domain}`;
if (secure) cookieText += `; secure`;
document.cookie = cookieText;
}
static remove(name, path, domain, secure) {
Cookie.set(name, '', new Date(0), path, domain, secure);
}
}Как это работает.
Класс Cookie имеет три статических метода: get(), set() и remove().
1) Метод get()
Метод get() возвращает значение файла cookie с указанным именем. Для этого нужно выполнить следующие шаги:
- Сначала найдите вхождение имени файла cookie по знаку равенства в свойстве
document.cookie. - Во-вторых, если файл cookie доступен, он использует
indexOf()для поиска конца файла, который указывается следующей точкой с запятой(;) после этого местоположения. Если точка с запятой недоступна, это означает, что файл является последним в строке. - В-третьих, декодируйте значение файла cookie с помощью функции
decodeURIComponent()и верните декодированное значение.
2) Метод set()
Метод set() устанавливает cookie на странице. Он принимает аргументы, необходимые для создания файла.
Для метода set() требуются первые два аргумента: имя и значение. Остальные аргументы необязательны.
Метод set() создает текст и устанавливает его в свойство document.cookie.
3) Метод remove()
Чтобы удалить файл cookie, метод remove() снова устанавливает файл с датой истечения срока действия, установленной на 1 января 1970 года. Обратите внимание, что new Date(0) возвращает объект даты, дата которого равна 1 января 1970 года.
Использование
Ниже показано, как использовать класс Cookie для установки, получения и удаления файла cookie с именем пользователя и значением admin:
// set a cookie
Cookie.set('username', 'admin');
// get a cookie
console.log(Cookie.get('username')); // admin
// remove a cookie by a name
Cookie.remove('username');Просмотр файлов с помощью веб-браузеров
Для просмотра файлов cookie в веб-браузере используйте devtools.
- Сначала щелкните вкладку приложения.
- Затем выберите узел Cookies в Storage.
На следующем рисунке показаны файлы cookie Google.com:
Заключение
- Файл cookie — это фрагмент данных, который сервер отправляет веб-браузеру. Затем веб-браузер сохраняет его на компьютере пользователя и отправляет файл обратно на тот же сервер в последующих запросах.
- Сервер использует файлы cookie для определения того, поступили ли два последовательных запроса из одного и того же веб-браузера.
- Для управления файлами используется объект
document.cookie. Чтобы сделать его более эффективным, вы можете использовать служебный класс Cookie. - Используйте функции
encodeURIComponent()иdecodeURIComponent()для кодирования и декодирования значений.