JavaScript и файлы cookie
Добавить в избранное
Что такое файлы cookie?
Веб-браузеры и серверы используют протокол HTTP для связи, а HTTP — это протокол без сохранения состояния. Но для коммерческого веб-сайта требуется поддерживать информацию о сеансе между разными страницами. Например, регистрация одного пользователя заканчивается после заполнения многих страниц. Но как поддерживать информацию о сеансах пользователей на всех веб-страницах.
Во многих случаях использование файлов cookie является наиболее эффективным методом запоминания и отслеживания предпочтений, покупок, комиссионных и другой информации, необходимой для лучшего обслуживания посетителей или статистики сайта.
Как это работает ?
Ваш сервер отправляет некоторые данные в браузер посетителя в виде файла cookie. Браузер может принять куки. Если да, то он сохраняется в виде простой текстовой записи на жестком диске посетителя. Теперь, когда посетитель переходит на другую страницу вашего сайта, браузер отправляет тот же файл cookie на сервер для извлечения. После извлечения ваш сервер знает/помнит, что было сохранено ранее.
Файлы cookie — это простая текстовая запись данных из 5 полей переменной длины:
Expires — дата истечения срока действия файла cookie. Если это поле пусто, срок действия файла cookie истечет, когда посетитель закроет браузер.
Domain — доменное имя вашего сайта.
Path — путь к каталогу или веб-странице, на которой установлен файл cookie. Это может быть пустым, если вы хотите получить файл cookie из любого каталога или страницы.
Secure — если это поле содержит слово «безопасный», то файл cookie может быть получен только с защищенного сервера. Если это поле пустое, такого ограничения не существует.
Name=Value — файлы cookie устанавливаются и извлекаются в виде пар ключ-значение.
Файлы cookie изначально были разработаны для программирования CGI. Данные, содержащиеся в файле cookie, автоматически передаются между веб-браузером и веб-сервером, поэтому сценарии CGI на сервере могут считывать и записывать значения файлов cookie, которые хранятся на клиенте.
JavaScript также может управлять файлами cookie, используя свойство cookie объекта Document . JavaScript может читать, создавать, изменять и удалять файлы cookie, которые применяются к текущей веб-странице.
Хранение файлов cookie
Самый простой способ создать файл cookie — присвоить объекту document.cookie строковое значение, которое выглядит следующим образом.
document.cookie = "key1 = value1;key2 = value2;expires = date";
Здесь атрибут expires является необязательным. Если вы укажете для этого атрибута допустимую дату или время, срок действия файла cookie истечет в указанную дату или время, после чего значение файла cookie будет недоступно.
Примечание . Значения файлов cookie не могут включать точки с запятой, запятые или пробелы. По этой причине вы можете использовать функцию escape() JavaScript для кодирования значения перед его сохранением в файле cookie. Если вы сделаете это, вам также придется использовать соответствующую функцию unescape() при чтении значения cookie.
Пример
Попробуйте следующее. Пример устанавливает имя клиента во входном файле cookie.
<html>
<head>
<title>Document</title>
<script>
function WriteCookie() {
if( document.myform.customer.value == "" ) {
alert("Введите какое-нибудь значение!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
document.write ("Настройка файлов cookie : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name="myform" action="">
Введите имя: <br>
<input type="text" name="customer"/>
<input type="button" value="Установить куки" onclick="WriteCookie();"/>
</form>
</body>
</html>
Теперь на вашем компьютере есть файл cookie с именем name . Вы можете установить несколько файлов cookie, используя несколько пар ключ = значение, разделенных запятой.
Чтение файлов cookie
Чтение файла cookie так же просто, как и его запись, потому что значением объекта document.cookie является файл cookie. Таким образом, вы можете использовать эту строку всякий раз, когда хотите получить доступ к файлу cookie. Строка document.cookie будет содержать список пар Name=Value, разделенных точкой с запятой, где Name — это имя файла cookie, а Value — его строковое значение.
Вы можете использовать функцию split() строк, чтобы разбить строку на ключ и значения следующим образом:
Пример
Попробуйте следующий пример, чтобы получить все файлы cookie.
<html>
<head>
<title>Document</title>
<script>
function ReadCookie() {
let allcookies = document.cookie;
document.write ("Все файлы cookie : " + allcookies );
// Получить все пары файлов cookie в массиве
cookiearray = allcookies.split(';');
// Теперь возьмите пару ключ-значение из этого массива
for(let i=0; i
value = cookiearray[i].split('=')[1];
document.write ("Ключ : " + name + " и значение : " + value);
}
}
</script>
</head>
<body>
<form name="myform" action="">
<p>нажмите кнопку и посмотрите результат:</p>
<input type="button" value="Получить Cookie" onclick="ReadCookie()"/>
</form>
</body>
</html>
Примечание . На вашем компьютере могут быть уже установлены некоторые другие файлы cookie. Приведенный выше код отобразит все файлы cookie, установленные на вашем компьютере.
Установка даты истечения срока действия файлов cookie
Вы можете продлить срок действия файла cookie за пределами текущего сеанса браузера, установив дату истечения срока действия и сохранив дату истечения срока действия в файле cookie. Это можно сделать, установив атрибут «expires» на дату и время.
Пример
Попробуйте следующий пример. Он иллюстрирует, как продлить срок действия файла cookie на 1 месяц.
<html>
<head>
<title>Document</title>
<script>
function WriteCookie() {
let now = new Date();
now.setMonth( now.getMonth() + 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Настройка файлов cookie : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name="myform" action="">
Введите имя: <br>
<input type="text" name="customer"/>
<input type="button" value="Получить Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>
Удаление файла cookie
Иногда вам может понадобиться удалить файл cookie, чтобы последующие попытки прочитать файл cookie ничего не вернули. Для этого вам просто нужно установить дату истечения срока действия в прошлом.
Пример
Попробуйте следующий пример. На нем показано, как удалить файл cookie, установив срок его действия на один месяц позже текущей даты.
<html>
<head>
<title>Document</title>
<script>
function WriteCookie() {
let now = new Date();
now.setMonth( now.getMonth() - 1 );
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name=" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Настройка файлов cookie : " + "name=" + cookievalue );
}
</script>
</head>
<body>
<form name="myform" action="">
Введите имя: <br>
<input type="text" name="customer"/>
<input type="button" value="Cookie" onclick="WriteCookie()"/>
</form>
</body>
</html>