Файл 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";

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

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

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

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