Введение в файлы cookie: понимание и работа с JavaScript-cookie

Preslav Dobrev2022-10-25 · 7 min read

Введение в файлы cookie: понимание и работа с JavaScript-cookie

Файлы cookie браузера, или HTTP-cookie, представляют собой текстовые файлы, состоящие из крошечных фрагментов данных. Веб-сайты используют эту информацию для отслеживания действий пользователя, что позволяет им предлагать персонализированные функции и улучшать качество работы в браузере. Файлы cookie могут хранить до 4096 байт данных. Однако мы можем добавить лишь ограниченное количество файлов cookie на один домен, в зависимости от браузера.

Базовое понимание HTTP-cookie необходимо любому интернет-пользователю, независимо от того, просматриваете ли вы сайты просто ради развлечения или зарабатываете этим на жизнь. Это руководство подробно познакомит вас с файлами cookie и их различными типами. Наша цель — помочь вам понять и научиться работать с JavaScript Cookies.

Давайте начнем!

Предварительные требования

Для прохождения этого руководства вам понадобятся:

Базовое понимание JavaScript.

Начало работы с JavaScript Cookies

Работа с JavaScript-cookie проста и понятна. Она позволяет без труда создавать, редактировать и извлекать файлы cookie. Кроме того, мы можем использовать свойство cookie объекта Document для управления и ограничения таких свойств файлов cookie, как имя, значение и длина, и многих других.

Типы файлов cookie

Сначала давайте рассмотрим различные типы файлов cookie:

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

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

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

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

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

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

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

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

Создание файлов cookie

Мы можем создавать файлы cookie двумя способами:

Отправка Set-Cookie в HTTP-заголовке ответа. В зависимости от технологий, используемых на веб-сервере, вы можете управлять заголовками cookie с помощью инструментов и библиотек. Файлы cookie могут содержать такую информацию, как дата истечения срока действия, и функции безопасности, такие как директива secure и флаг HttpOnly.

HttpOnly: Указывает, что браузер не может читать или изменять файлы cookie.
Secure: Указывает, что файл cookie может быть отправлен только по протоколу HTTPS.

Используя свойство document.cookie в JavaScript, мы можем создавать, читать и удалять файлы cookie.

Шаг 1 — Создание файла cookie

Далее мы продемонстрируем процесс создания JavaScript-cookie. Файлы cookie сохраняются в формате пары имя-значение:

document.cookie = "UserName = CloudSigma";

1	document.cookie = "UserName = CloudSigma";

В приведенном выше файле cookie UserName — это имя файла cookie, тогда как CloudSigma — это значение, хранящееся в нем.

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

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC";
document.cookie = "UserName = CloudSigma";

document.cookie = "UserName = CloudSigma";

expires=Fri, 11 Jun 2022 12:00:00 UTC";

document.cookie = "UserName = CloudSigma";

По умолчанию файлы cookie относятся к текущей странице. Однако мы также можем указать область действия файла cookie с помощью параметра path:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

1 2	document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

Cookie Max-Age против Cookie Expire

В зависимости от ваших потребностей вы можете использовать эти две стратегии для установки даты истечения срока действия файла cookie. Разница между ними заключается в том, что expires задает дату истечения срока действия, когда файл cookie удаляется. Напротив, max-Age задает время в секундах, по истечении которого куки будут удалены. К сожалению, max-age поддерживается не всеми браузерами.

Пример установки куки с использованием expires и max-age:

Expires:

var d = new Date();
d.setTime(d.getTime() + 5*60*1000); // в миллисекундах
document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

var d = new Date();

d.setTime(d.getTime() + 5*60*1000); // в миллисекундах

document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

Max-age :

document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

1	document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

Step 2 — Reading a Cookie

Атрибут document.cookie возвращает строку. Если куки две или более, мы используем точку с запятой ( ;) и пробел для их разделения.

Мы используем метод split(), чтобы извлечь отдельную куку из списка куки-файлов. Этот метод разбивает список на отдельные пары имя-значение. После этого вы можете выполнить поиск нужной куки, которую хотите прочитать:

function setCookie(name, count, validityCheck) {
    var cookie = name + "=" + encodeURIComponent(value);
    if(typeof validityCheck === "number") {
        cookie += "; max-age=" + (validityCheck*24*60*60);
        document.cookie = cookie;
    }
}

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
    }
}
    return null;
}

function checkCookie() {
    var UserName = getCookie("UserName");
    if(UserName != "") {
    alert("С возвращением, " + UserName);
} else {
    firstName = prompt("Введите ваше имя пользователя:");
        if(UserName != "" && UserName != null) {
            setCookie("UserName", UserName, 30);
        }
    }
}

function setCookie(name, count, validityCheck) {

var cookie = name + "=" + encodeURIComponent(value);

if(typeof validityCheck === "number") {

cookie += "; max-age=" + (validityCheck*24*60*60);

document.cookie = cookie;

}

function getCookie(name) {

var cookieArr = document.cookie.split(";");

for(var i = 0; i < cookieArr.length; i++) {

var cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {

return decodeURIComponent(cookiePair[1]);

}

return null;

}

function checkCookie() {

var UserName = getCookie("UserName");

if(UserName != "") {

alert("С возвращением, " + UserName);

} else {

firstName = prompt("Введите ваше имя пользователя:");

if(UserName != "" && UserName != null) {

setCookie("UserName", UserName, 30);

}

Давайте разберем функции, которые мы создали в коде:

Имя функции	Описание
setCookie()	Создает куку
getCookie()	Считывает значение куки
checkCookie()	Проверяет, установлено ли значение UserName или нет.

На следующем шаге мы узнаем, как обновить куку.

Шаг 3 — Обновление куки

Мы можем задавать новые значения для атрибутов нашей куки. В нашем примере давайте обновим подписку пользователя с месячного плана на квартальный.

Давайте обновим атрибут max-age куки UserName с 30 дней до 180 дней:

document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60;
document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

1 2	document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60; document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

Шаг 4 — Удаление куки

Перезапись куки с тем же именем удалит куку, которую вы хотите стереть. Мы можем удалить куку, установив атрибут max-age в значение 0:

document.cookie = "UserName=; max-age=0";

1	document.cookie = "UserName=; max-age=0";

Кроме того, если у cookie-файла указан путь, удалите его, указав этот путь:

document.cookie = "Username = ExcellentDesign; Path = /";

1	document.cookie = "Username = ExcellentDesign; Path = /";

Заключение

Файлы cookie необходимы для правильной работы и функционирования веб-сайта. В этом вводном руководстве мы подробно рассмотрели файлы cookie и их различные типы. Кроме того, на примере мы научились работать с файлами cookie. Теперь, когда вы освоили использование файлов cookie в JavaScript, начните создавать собственные файлы cookie, чтобы узнать и изучить больше по этой теме.

Кроме того, вы можете изучить множество руководств по JavaScript и веб-разработке в нашем блоге:

Приятного программирования!

Preslav Dobrev

Автор · CloudSigma

Preslav Dobrev — креативный дизайнер в CloudSigma, сосредоточенный на формировании последовательного корпоративного образа с помощью традиционных и инновационных маркетинговых каналов. Он умело сочетает художественное видение со стратегическим маркетингом, создавая убедительные истории бренда.