Файл cookie — это небольшой текстовый файл, который позволяет хранить небольшой объем данных (около 4 КБ) на компьютере пользователя. Он обычно используются для отслеживания информации, например пользовательские настройки, которые сайт может получить, чтобы персонализировать страницу, когда пользователь посещает веб-сайт в следующий раз.

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

Размер файла cookie может составлять до 4 КБ, включая его имя и значения. Файлы cookie, размер которых превышает этот объем, обрезаются по размеру. Кроме того, каждый раз, когда браузер запрашивает страницу на сервере, все данные в куки автоматически отправляются на сервер в рамках запроса.

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

Создание Cookie в JavaScript

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

Чтобы создать или сохранить новый файл cookie, присвойте этому свойству строку name=value, например:

document.cookie = "firstName=Christopher";

Значение cookie не может содержать точку с запятой, запятую или пробел. По этой причине вам нужно будет использовать встроенную в JavaScript функцию encodeURIComponent() для кодирования значений, содержащих эти символы, перед сохранением их в файле cookie. Аналогично, вам нужно будет использовать соответствующую функцию decodeURIComponent(), когда вы читаете значение cookie.

document.cookie = "name=" + encodeURIComponent("Christopher Columbus");

По умолчанию время жизни куки — это текущий сеанс браузера, что означает, что он удаляется при выходе пользователя из браузера. Чтобы файл cookie сохранялся после текущего сеанса браузера, вам необходимо указать его время жизни (в секундах) с атрибутом max-age. Этот атрибут определяет, как долго файл cookie может оставаться в системе пользователя до его удаления, например, следующий файл cookie будет действовать в течение 30 дней.

document.cookie = "firstName=Christopher; max-age=" + 30*24*60*60;

Вы также можете указать время жизни куки с атрибутом expires. Этот атрибут принимает точную дату (в формате GMT / UTC), когда срок действия файла cookie истекает, а не вариацию в секундах.

document.cookie = "firstName=Christopher; expires=Thu, 31 Dec 2099 23:59:59 GMT";

Вот функция, которая устанавливает cookie с необязательным атрибутом max-age. Вы также можете использовать ту же функцию для удаления куки, передав значение 0 для параметра daysToLive.

function setCookie(name, value, daysToLive) {
    // Кодируем значение, чтобы избежать точек с запятой, запятых и пробелов
    var cookie = name + "=" + encodeURIComponent(value);
    
    if(typeof daysToLive === "number") {
        /* Устанавливаем атрибут max-age, чтобы срок действия cookie истек
         по истечении указанного количества дней */
        cookie += "; max-age=" + (daysToLive*24*60*60);
        
        document.cookie = cookie;
    }
}

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

document.cookie = "firstName=Christopher; path=/";

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

Если файл cookie, созданный страницей на blog.example.com, устанавливает свой атрибут path в /, а атрибут домена example.com, этот файл cookie также будет доступен для всех веб-страниц на страницах backend.example.com, portal.example.com и т.д. Однако он не будет доступен за пределами домена.

document.cookie = "firstName=Christopher; path=/; domain=example.com";

Существует также логический атрибут с именем secure. Если этот атрибут указан, cookie будет передаваться только через безопасное (то есть зашифрованное) соединение, такое как HTTPS.

document.cookie = "firstName=Christopher; path=/; domain=example.com; secure";

Чтение Cookie

Чтение файла cookie немного сложнее, поскольку свойство document.cookie просто возвращает строку, содержащую точку с запятой и список всех файлов cookie, разделенных пробелами (т.е. пары name=value, например, firstName=John; lastName=Doe;). Эта строка не содержит атрибутов, таких как expires, path, domain и т. д., которые могли быть установлены для cookie.

Чтобы получить отдельный файл cookie из этого списка, вам необходимо использовать метод split(), чтобы разбить его на отдельные пары name=value и найти конкретное имя, как показано ниже:

function getCookie(name) {
    // Разбиваем строку cookie и получаем все отдельные пары имя = значение в массиве
    var cookieArr = document.cookie.split(";");
    
    // Запускаем цикл по элементам массива
    for(var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");
        
        /* Удаляем пробелы в начале имени файла cookie
         и сравниваем его с заданной строкой */
        if(name == cookiePair[0].trim()) {
            // Расшифровываем значения cookie и возвращаем
            return decodeURIComponent(cookiePair[1]);
        }
    }
    
    // Возвращаем null, если не найдено
    return null;
}

Теперь мы собираемся создать еще одну функцию checkCookie(), которая будет проверять, задан ли файл cookie firstName, используя вышеупомянутую функцию getCookie(), и если она установлена, то эта функция будет отображать приветственное сообщение; в противном случае эта функция предложит пользователю ввести свое имя и сохранить его в файле cookie, используя нашу ранее созданную функцию setCookie().

function checkCookie() {
    // Получаем куки, используя нашу пользовательскую функцию
    var firstName = getCookie("firstName");
    
    if(firstName != "") {
        alert("Welcome again, " + firstName);
    } else {
        firstName = prompt("Please enter your first name:");
        if(firstName != "" && firstName != null) {
            // Устанавливаем cookie с помощью нашей пользовательской функции
            setCookie("firstName", firstName, 30);
        }
    }
}

Обновление Cookie

Единственный способ обновить или изменить файл cookie — это создать другой файл cookie с тем же name и path, что и существующий. Создание файла cookie с тем же именем, но с другим путем, чем у существующего, добавит дополнительный файл cookie. Вот пример:

// Создаем куки
document.cookie = "firstName=Christopher; path=/; max-age=" + 30*24*60*60;

// Обновляем куки
document.cookie = "firstName=Alexander; path=/; max-age=" + 365*24*60*60;

Удаление Cookie

Чтобы удалить cookie, просто установите его еще раз, используя тот же name, указав пустое или произвольное значение и установив для его атрибута max-age значение 0. Помните, что если вы указали path и атрибут domain для cookie, вам также нужно будет включить их при удалении.

// Удаляем куки
document.cookie = "firstName=; max-age=0";

// Указываем пути и домены при удалении куки
document.cookie = "firstName=; path=/; domain=example.com; max-age=0";

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

document.cookie = "firstName=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 2

Оценок пока нет. Поставьте оценку первым.