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