Файлы cookie JavaScript
Файлы 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";
Вы также можете добавить дату истечения срока действия (в формате UTC). По умолчанию 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=value; 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.
Просто установите для параметра 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.
Пример файла cookie JavaScript
В следующем примере мы создадим файл 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 и строку срока действия.
Функция для получения куки
Затем мы создаем объект 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 "";
}
Объяснение функции:
Возьмите имя файла cookie в качестве параметра (cname).
Создайте переменную (имя) с текстом для поиска (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 имени пользователя в течение 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()при загрузке страницы.