Файлы cookie позволяют хранить информацию о пользователях на веб страницах.
Что такое файлы cookie?
Файлы cookie - это данные, хранящиеся в небольших текстовых файлах на вашем компьютере.
Когда веб сервер отправляет веб страницу в браузер, соединение отключается, и сервер забывает все о пользователе.
Файлы cookie были изобретены для решения проблемы "как запомнить информацию о пользователе":
- Когда пользователь посещает веб страницу, его/ее имя может быть сохранено в файле cookie.
- При следующем посещении страницы пользователем, cookie "запоминает" его/ее имя.
Файлы cookie сохраняются в парах имя-значение, например:
username = Щипунов Андрей
Когда браузер запрашивает веб страницу с сервера, в запрос добавляются файлы cookie, принадлежащие странице. Таким образом сервер получает необходимые данные для "запоминания" информации о пользователях.
Ни один из приведенных ниже примеров не будет работать, если в вашем браузере отключена поддержка локальных файлов cookie.
Создать файл cookie с помощью JavaScript
JavaScript может создавать, читать и удалять файлы cookie с помощью document.cookie свойства.
С помощью JavaScript cookie можно создать следующим образом:
document.cookie = "username=Щипунов Андрей";
Вы также можете добавить дату истечения срока действия (по времени UTC). По умолчанию cookie удаляется при закрытии браузера:
document.cookie = "username=Щипунов Андрей; expires=Thu, 18 Dec 2013 12:00:00 UTC";
С помощью параметра пути вы можете указать браузеру, к какому пути принадлежит файл cookie. По умолчанию cookie принадлежит текущей странице.
document.cookie = "username=Щипунов Андрей; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Прочтите файл cookie с помощью JavaScript
С помощью JavaScript файлы cookie можно читать так:
var x = document.cookie;
document.cookie вернет все файлы cookie в одной строке примерно так: cookie1=value; cookie2=value; cookie3=value;
Изменить cookie с помощью JavaScript
С помощью JavaScript вы можете изменить cookie так же, как вы его создали:
document.cookie = "username=Щипунов Татьяна; 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 = value; cookie2 = value;
Если вы хотите найти значение одного указанного файла cookie, вы должны написать функцию JavaScript, которая ищет значение файла cookie в строке cookie.
Пример файла cookie JavaScript
В следующем примере мы создадим файл cookie, в котором будет храниться имя посетителя.
Когда посетитель заходит на веб страницу в первый раз, его попросят ввести свое имя. Затем имя сохраняется в файле cookie.
В следующий раз посетитель приходит на ту же страницу, он/она получит приветственное сообщение.
В этом примере мы создадим 3 функции JavaScript:
- Функция для установки значения cookie
- Функция для получения значения cookie
- Функция для проверки значения cookie
Функция для установки файлов cookie
Сначала мы создаем объект function, в котором имя посетителя сохраняется в переменной cookie:
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
Объяснение примера:
Параметры функции выше - это имя cookie (cname), значение cookie (cvalue) и количество дней до истечения срока действия cookie (exdays).
Функция устанавливает файл cookie путем сложения имени файла cookie, значения файла cookie и строки expires.
Функция для получения файла cookie
Затем мы создаем объект, function который возвращает значение указанного файла cookie:
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var 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 не установлен, он отобразит окно подсказки с запросом имени пользователя и сохранит файл cookie имени пользователя в течение 365 дней, вызвав setCookie функцию:
function checkCookie() {
var
username = getCookie("username");
if (username != "") {
alert("Добро пожаловать снова " + username);
} else {
username = prompt("Пожалуйста, введите ваше имя:", "");
if (username != ""
&& username != null) {
setCookie("username", username, 365);
}
}
}
Теперь все вместе
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue +
";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca
= document.cookie.split(';');
for(var i = 0; i < ca.length; i++)
{
var 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() {
var user = getCookie("username");
if (user != "")
{
alert("Добро пожаловать снова " + user);
} else {
user = prompt("Пожалуйста, введите ваше имя:", "");
if (user != "" &&
user != null) {
setCookie("username", user, 365);
}
}
}
Попробуйте сами »
В приведенном выше примере checkCookie() функция запускается при загрузке страницы.