JavaScript Cookies
Вступление
JavaScript Cookies - отличный способ сохранить настройки пользователя в своем браузере. Это полезно для веб-сайтов и пользователей, если не используется для кражи личной информации.
Содержание:
Что такое куки?
Файл cookie - это небольшой фрагмент текста, сохраняемый на компьютере посетителя веб-браузером. Поскольку информация хранится на жестком диске, к ней можно получить доступ позже, даже после выключения компьютера.
Файл cookie может использоваться для аутентификации, отслеживания сеанса, запоминания конкретной информации о пользователе, такой как его имя, пароль, дата последнего посещения и т. Д.
Как куки, как простой фрагмент текста, они не являются исполняемыми. В javaScript мы можем создавать и извлекать данные cookie с помощью свойства cookie объекта документа JavaScript.
Вы можете установить настройку cookie document.cookie в строку cookie. Позже мы обсудим детали, как создать и получить cookie.
Что куки не могут сделать?
- Во-первых, все современные браузеры поддерживают файлы cookie, но пользователь может отключить их. В IE зайдите в Инструменты и выберите Свойства обозревателя, появится окно. Нажмите на конфиденциальность и выберите расширенную кнопку, появится другое новое окно, отсюда вы можете отключить cookie.
- Куки-файлы могут идентифицировать используемый компьютер, а не человека.
- Ожидается, что самый современный браузер сможет хранить не менее 300 файлов cookie размером 4 килобайта (4 КБ) на сервер или домен.
- Для каждого домена и пути вы можете сохранить до 20 файлов cookie.
- Файлы cookie не могут быть доступны с любого другого компьютера, кроме компьютера посетителя, который создал файл cookie.
- Веб-сайт может устанавливать и читать только свои собственные куки (например, Yahoo не может читать куки IE).
JavaScript: настройка файлов cookie
cookies.txt:
Во время сеанса просмотра браузер сохраняет куки в памяти, во время выхода они переходят в файл cookies.txt. Различные браузеры хранят файлы cookie в другом месте на диске.
Например, в Windows 2000 Firefox сохраняет куки в C: Documents и Settingsyour_login_name_hereLocalSettingsApplicationDataMozillaFirefoxProfilesdefault .7g1Cache. Обратите внимание, что имя папки «default.7g1» может отличаться в зависимости от версии Firefox, которую вы используете. Каждый раз, когда вы открываете свой браузер, ваши куки считываются из сохраненного местоположения, а в конце, ваш браузер, куки сохраняются на диске. По истечении срока действия файла cookie он больше не сохраняется на жестком диске.
Файл cookie состоит из шести частей: имя, значение, срок действия, путь, домен и безопасность. Первые две части, т.е. имя и значение, являются обязательными, а остальные - необязательными.
Синтаксис
document.cookie = "NAME = VALUE; expires = DATE; path = PATH; домен = DOMAIN; безопасный";
Различные компоненты вышеупомянутого синтаксиса обсуждаются с заголовком, определяющим компонент.
имя и значение
Первая часть строки cookie должна иметь имя и значение. Полное имя / значение должно быть одной строкой без запятых, точек с запятой или пробельных символов. Вот пример, который сохраняет строку «Джордж» в cookie с именем «myName». Оператор JavaScript:
document.cookie = "myName = George";
Использование функции encodeURIComponent () и decodeURIComponent ().
Используя функцию encodeURIComponent (), вы гарантируете, что строка значения cookie не содержит запятых, точек с запятой или пробельных символов. которые не допускаются в значениях cookie.
encodeURIComponent («Доброе утро»);
Возвращает строку как:
Хорошо% 20Morning
в то время как decodeURIComponent ("Good% 20Morning") декодирует строку как:
Доброе утро.
истекает
Cookie имеет очень ограниченный срок службы. Он исчезнет, когда пользователь выйдет из браузера. Чтобы продлить срок действия файлов cookie, необходимо установить дату истечения срока действия в следующем формате.
ДД-ПН-ГГ ЧЧ: ММ: СС GMT
Вот пример, где cookie будет действовать до понедельника, 12 июня 2011: 00: 00: 00 GMT
document.cookie = "VisiterName = George; expires = Mon, 12 Jun 2011: 00: 00: 00 GMT;";
В приведенном выше примере мы записали дату на страницах, но в реальной жизни вы можете использовать объект Date, чтобы получить текущую дату, а затем установить cookie-файл, срок действия которого истекает через шесть или десять месяцев.
Вот пример
cookieExpire = new Date();
cookieExpire.setMonth(cookieExpire.getMonth() + 10);
document.cookie = "VisitorName=George; expires="+ expireDate.toGMTString() + ";";
Приведенный выше код JavaScript создаст новый файл cookie с именем VisitorName со значением «George», срок его действия истечет через 10 месяцев после текущей даты.
дорожка
Если страница kodesource.top/javascript/ устанавливает файл cookie, то все страницы в этом каталоге (т.е. ../javascript) и его подкаталогах смогут прочитать файл cookie. Но страница в каталоге www.w3resource / php / не может прочитать cookie. Обычно путь устанавливается в корневой каталог ('/'), что означает, что файл cookie доступен для всех страниц вашего сайта. Если вы хотите, чтобы файл cookie читался в определенной директории с именем php, добавьте путь = / php ;.
Вот пример, в котором мы установили конкретный путь под названием «php»
document.cookie= "VisiterName=George;expires=Mon,12Jun2011:00:00:00"
+ ";path=/php;";
В следующем коде мы указали, что файл cookie доступен для всех подкаталогов домена.
document.cookie= "VisiterName=George;expires=Mon,12Jun2011:00:00:00"
+ ";path=/;";
домен
Некоторые сайты имеют много доменов. Цель «домена» - разрешить использование файлов cookie для других поддоменов. Например, веб-портал называют «mysite». Его основной сайт http://www.mysite.com с супружеским сайтом (http://matimonial.mysite.com), финансовым сайтом (http://financial.mysite.com) и туристическим сайтом (http: //travel.mysite.com). По умолчанию, если веб-страница туристического сайта устанавливает файл cookie, страницы финансового сайта не могут прочитать этот файл cookie. Но если вы добавите domain = mysite к cookie, все домены, заканчивающиеся на «mysite», смогут прочитать cookie. Обратите внимание, что доменное имя должно содержать как минимум две точки (.), Например, «.mysite.com»
Вот пример.
document.cookie= "VisiterName=George;expires=Mon,12Jun2011:00:00:00"
+ ";path=/" + domain = mysite.com;";
Безопасный
Последняя часть строки cookie - это защищенная часть, которая является логическим значением. Значение по умолчанию неверно. Если файл cookie помечен как безопасный (т. Е. Безопасное значение равно true), файл cookie будет отправлен на веб-сервер и попытаться получить его с помощью безопасного канала связи. Это применимо к тем серверам, которые имеют функцию SSL (Secure Sockets Layer).
JavaScript: создание файлов cookie
Мы уже изучили различные части файла cookie, такие как имя, значение, срок действия, путь, домен и безопасность. Давайте создадим простое печенье.
В следующем примере мы написали имя функции CookieSet и установили некоторые из ее атрибутов.
Пример:
В следующем веб-документе четыре параметра name, value, expires и path отправляются в функцию «CookieSet». Безопасная и доменная части здесь не обязательны. Пустые значения, установленные для истечения срока и части пути, и есть проверка истечения срока и части пути. Если expires получат пустое значение, он установит дату истечения 9 месяцев от текущей даты, и если путь получит пустое значение, то текущим каталогом и подкаталогами будет путь. ToUTCString преобразует дату в строку, используя универсальное соглашение о времени.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript creating cookies - example1</title>
</head>
<body>
<h1 style="color: red">JavaScript creating cookies - example1</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function CookieSet (cName, cValue, cPath, cExpires)
{
cvalue = encodeURIComponent(cValue);
if (cExpires == "")
{
var cdate = new Date();
cdate.setMonth(cdate.getMonth() + 9);
cExpires = cdate.toUTCString();
}
if (cPath != "")
{
cPath = ";Path=" + cPath;
}
document.cookie = cName + "=" + cValue +"expires=" + cExpires + cPath;
}
CookieSet("Name","George ","","");
alert(document.cookie)
//]]>
</script>
</body>
</html>
Пример: получить реальные данные от пользователя и сохранить их в файле cookie.
Следующий веб-документ получает реальные данные от пользователя и сохраняет их в файле cookie в течение следующего года с текущей даты.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript creating cookies - receive real data. example1</title>
</head>
<body>
<h1 style="color: red">JavaScript creating cookies, receive real data. - example1</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
var visitor_name = prompt("What's your name?","");
var expr_date = new Date("December 30, 2012");
var cookie_date = expr_date.toUTCString();
final_cookie = "Name =" + encodeURIComponent(visitor_name) + ";expires_on = " + cookie_date;
document.cookie = final_cookie;
alert(final_cookie);
//]]>
</script>
</body>
</html>
Удалить куки
Удалить куки очень легко. Чтобы удалить cookie, сначала примите имя cookie и создайте cookie с тем же именем и установите дату истечения срока действия один день назад от текущей даты. Поскольку срок годности уже истек, браузер немедленно удаляет cookie. Не подтверждено, что куки были удалены во время текущего сеанса, некоторые браузеры сохраняют куки до перезагрузки браузера. Чтобы увидеть пример, прочитайте реальный пример на странице Cookies .
JavaScript: чтение файлов cookie
Когда браузер открывает веб-страницу, он читает файлы cookie (если они уже были сохранены), которые были сохранены на вашем компьютере. Мы использовали document.cookie для получения информации о куки.
Пример:
В следующем веб-документе мы получаем имя от посетителя и сохраняем его в файле cookie с именем «Имя».
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript creating cookies - receive real data. example1</title>
</head>
<body>
<h1 style="color: red">JavaScript creating cookies, receive real data. - example1</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
var visitor_name = prompt("What's your name?","");
var curdate = new Date();
curdate.setMonth(curdate.getMonth() + 6);
var cookie_date = curdate.toUTCString();
final_cookie = "my_cookie=" + encodeURIComponent(visitor_name) + ";expires_on = " + cookie_date;
document.cookie = final_cookie;
alert(final_cookie);
//]]>
</script>
</body>
</html>
Пример: извлекает значения из cookie
В следующем веб-документе мы прочтем сохраненный файл cookie и получим его значение.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript : Retrieve values from a cookie - example1</title>
</head>
<body>
<h1 style="color: red">JavaScript : Retrieve values from a cookie - example1</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
var search_cookie = "my_cookie" + "="
if (document.cookie.length > 0)
{
// Search for a cookie.
offset = document.cookie.indexOf(search_cookie)
if (offset != -1)
{
offset += search_cookie.length
// set index of beginning of value
end = document.cookie.indexOf(";",offset)
if (end == -1)
{
end = document.cookie.length
}
alert(decodeURIComponent(document.cookie.substring(offset, end)))
}
}
//]]>
</script>
</head>
</body>
</html>
JavaScript: Cookies реальный пример
В следующем веб-документе, если посетитель зарегистрировал свое имя, его имя будет отображаться, если он вернется на эту страницу в течение следующих девяти месяцев. Когда посетитель регистрирует свое имя, на жестком диске посетителя сохраняется файл cookie, чтобы удалить этот файл cookie, см. Следующий пример.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Cookie</title>
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function register(name)
{
var curdate = new Date();
curdate.setMonth(curdate.getMonth() + 9);
cookieExpires = curdate.toUTCString();
final_cookie = "mycookie=" + encodeURIComponent(name) + ";expires_on = " + cookieExpires;
document.cookie = final_cookie;
}
function getCookie(cookie_name)
{
var search_cookie = cookie_name + "="
if (document.cookie.length > 0)
{
start_position = document.cookie.indexOf(search_cookie)
if (start_position!= -1)
{
start_position += search_cookie.length
end_position = document.cookie.indexOf(";", start_position)
if (end_position == -1)
end_position = document.cookie.length
return (decodeURIComponent(document.cookie.substring(start_position, end_position)))
}
}
}
//]]>
</script>
</head>
<body>
<h1 style="color: red">JavaScript Cookie</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
var username = getCookie("mycookie")
if (username)
{
document.write("Welcome Back, ", username)
}
if (username == null)
{
document.write("You haven't been here in the last nine months...")
document.write("When you return to this page in next nine months, ");
document.write("your name will be displayed...with Welcome.");
document.write('<form onsubmit = "return false">');
document.write('<p>Enter your name: </p>');
document.write('<input type="text" name="username" size="40">');
document.write('<input type = "button" value= "Register"');
document.write('onClick="register(this.form.username.value); history.go(0)">');
document.write('</form>');
}
//]]>
</script>
</body>
</html>
Чтобы удалить указанный выше файл cookie с вашего жесткого диска, используйте следующий веб-документ.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Cookie - example1</title>
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function register(name)
{
var nowDate = new Date();
nowDate.setMonth(nowDate.getMonth() + 9);
cookieExpires = nowDate.toUTCString();
final_cookie = "mycookie=" + encodeURIComponent(name) + ";expires_on = " + cookieExpires;
document.cookie = final_cookie;
}
function getCookie(cookie_name)
{
var search_cookie = cookie_name + "="
if (document.cookie.length > 0)
{
start_position = document.cookie.indexOf(search_cookie)
if (start_position!= -1)
{
start_position += search_cookie.length
end_position = document.cookie.indexOf(";", start_position)
if (end_position == -1)
end_position = document.cookie.length
return (decodeURIComponent(document.cookie.substring(start_position, end_position)))
}
}
}
//]]>
</script>
</head>
<body>
<h1 style="color: red">JavaScript Cookie - example1</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
var yourname = getCookie("mycookie")
if (yourname)
{
document.write("Welcome Back, ", yourname)
}
if (yourname == null)
{
document.write("You haven't been here in the last nine months...")
document.write("When you return to this page in next nine months, ");
document.write("your name will be displayed...with Welcome.");
document.write('<form onsubmit = "return false">');
document.write('<p>Enter your name: </p>');
document.write('<input type="text" name="username" size="40">');
document.write('<input type = "button" value= "Register"');
document.write('onClick="register(this.form.username.value); history.go(0)">');
document.write('</form>');
}
//]]>
</script>
</body>
</html>
Нажмите здесь, чтобы удалить печенье
Предыдущая: JavaScript: HTML-форма - проверка IP-адреса
Далее: Отладка JavaScript с помощью Firebug
Новый контент: Composer: менеджер зависимостей для PHP , R программирования