JavaScript Cookie / Куки
Файлы cookie позволяют хранить информацию о пользователях на веб-страницах.
Что такое файлы cookie?
Файлы cookie - это данные, которые хранятся на вашем компьютере в небольших текстовых файлах.
Когда веб-сервер отправляет веб-страницу в браузер, соединение разрывается, и сервер забывает все о пользователе.
Файлы cookie были изобретены, чтобы решить проблему "как запомнить информацию о пользователе":
- Когда пользователь посещает веб-страницу, его/её имя может быть сохранено в файле cookie.
- При следующем посещении страницы пользователем файл cookie "запоминает" его/её имя.
Файлы cookie сохраняются в парах имя-значение, например:
username = John Doe
Когда браузер запрашивает веб-страницу с сервера, в запрос добавляются файлы cookie, принадлежащие странице. Таким образом, сервер получает данные, необходимые для "запоминания" информации о пользователях.
Ни один из приведенных ниже примеров не будет работать, если в вашем браузере отключена поддержка локальных файлов cookie.
Создать файл cookie с помощью JavaScript
JavaScript может создавать, читать и удалять файлы cookie с помощью свойства document.cookie.
С помощью JavaScript cookie можно создать следующим образом:
document.cookie = "username=John Doe";
Вы также можете добавить дату истечения срока действия (по всемирному координированному времени). По умолчанию cookie удаляется при закрытии браузера:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
С помощью параметра пути вы можете указать браузеру, к какому пути принадлежит файл cookie. По умолчанию cookie принадлежит текущей странице.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Прочитать файл cookie с помощью JavaScript
С помощью JavaScript файлы cookie можно читать так:
let x = document.cookie;
document.cookie вернёт все файлы cookie в одной строке, как например: cookie1=значение; cookie2=значение; cookie3=значение;
Изменить файл cookie с помощью JavaScript
С помощью JavaScript вы можете изменить файл cookie так же, как вы его создали:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Старый файл cookie перезаписывается.
Удалить файл cookie с помощью JavaScript
Удалить cookie очень просто.
Вам не нужно указывать значение cookie при удалении cookie.
Просто установите параметр expires (истекает) на прошедшую дату:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
Необходимо определить путь cookie, чтобы убедиться, что удалён правильный файл cookie.
Некоторые браузеры не позволяют удалить файл cookie, если не указан путь.
Строка cookie
Свойство document.cookie выглядит как обычная текстовая строка. Но это не так.
Даже если вы напишете целую строку cookie в document.cookie, когда вы снова её прочитаете, вы сможете увидеть только её пару имя-значение.
Если вы устанавливаете новый файл cookie, старые файлы cookie не перезаписываются. Новый файл cookie добавляется в document.cookie, поэтому, если вы снова прочитаете document.cookie, вы получите что-то вроде:
cookie1 = значение; cookie2 = значение;
Если вы хотите найти значение одного указанного файла cookie, вы должны написать функцию JavaScript, которая будет искать значение файла cookie в строке файла cookie.
JavaScript Cookie Пример
В следующем примере мы создадим файл cookie, в котором будет храниться имя посетителя.
Когда посетитель впервые заходит на веб-страницу, ему будет предложено ввести свое имя. Затем имя сохраняется в файле cookie.
В следующий раз, когда посетитель перейдет на ту же страницу, он получит приветственное сообщение.
Для примера мы создадим 3 функции JavaScript:
- Функция для установки значения cookie
- Функция для получения значения cookie
- Функция для проверки значения cookie
Функция для установки значения cookie
Сначала мы создаем функцию function которая сохраняет имя посетителя в переменной cookie:
Пример
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Объяснение примера:
Параметры функции выше - это имя файла cookie (cname), значение файла cookie (cvalue) и количество дней до истечения срока действия файла cookie (exdays).
Функция устанавливает файл cookie, складывая имя файла cookie, значение файла cookie и строку с истекающим сроком действия.
Функция для получения файла cookie
Затем мы создаем function, которая возвращает значение указанного файла cookie:
Пример
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for(let i = 0; i <ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Объяснение функции (алгоритм действий):
- В качестве параметра (cname) используйте имя файла cookie
- Создайте переменную (имя) с текстом для поиска (cname + "=")
- Расшифруйте строку cookie, чтобы обрабатывать файлы cookie со специальными символами, например '$'
- Разделите document.cookie на точки с запятой в массив с именем ca (ca = decodedCookie.split(';'))
- Переберите массив ca (i = 0; i < ca.length; i++), и прочтите каждое значение c = ca[i])
- Если cookie найден (c.indexOf(name) == 0), вернуть значение cookie (c.substring(name.length, c.length)
- Если cookie не найден, вернуть ""
Функция для проверки файлов cookie
Наконец, создаём функцию, которая проверяет, установлен ли файл cookie.
Если установлен файл cookie, будет отображаться приветствие.
Если файл cookie не установлен, он отобразит окно подсказки с запросом имени пользователя и сохранит файл cookie имени пользователя в течение 365 дней, вызвав функцию setCookie:
Пример
function checkCookie() {
let username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
Теперь всё вместе
Пример
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
let user = getCookie("username");
if (user != "")
{
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
Попробуйте сами »
В приведенном выше примере функция checkCookie() запускается при загрузке страницы.
