JavaScript Cookie

Куки используются для хранения информации о пользователе на веб-страницах.

Что такое куки?

Куки — это некоторые данные, хранящиеся в текстовых файлах на вашем компьютере.

Когда веб-сервер отправляет веб-страницу браузеру, после закрытия соединения сервер не записывает информацию о пользователе.

Роль куки заключается в решении вопроса «как записывать информацию о пользователе на стороне клиента»:

  • Когда пользователь посещает веб-страницу, его имя может быть записано в куки.
  • Когда пользователь посещает страницу в следующий раз, запись о посещении пользователя может быть прочитана из куки.

Куки хранятся в виде пар имя/значение, как показано ниже:

username=John Doe

Когда браузер запрашивает веб-страницу у сервера, куки, относящиеся к этой странице, добавляются в запрос. Таким образом сервер получает информацию о пользователе.

Использование JavaScript для создания куки

JavaScript может использовать свойствоdocument.cookieдля создания, чтения и удаления куки.

В JavaScript создание куки выглядит следующим образом:

document.cookie="username=John Doe";

Вы также можете добавить время истечения срока действия cookie (в формате UTC или GMT). По умолчанию cookie удаляется при закрытии браузера:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

Вы можете использовать параметр path, чтобы указать браузеру путь cookie. По умолчанию cookie относится к текущей странице.

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

Чтение cookie с помощью JavaScript

В JavaScript для чтения cookie можно использовать следующий код:

var x = document.cookie;

Note document.cookie вернёт все cookie в виде строки в формате: cookie1=value; cookie2=value; cookie3=value;

Изменение cookie с помощью JavaScript

В JavaScript изменение cookie похоже на создание cookie, как показано ниже:

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

Старый cookie будет перезаписан.

Использование JavaScript для удаления cookie

Удалить cookie очень просто. Нужно лишь установить параметр expires в прошедшее время, как показано ниже, — Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Обратите внимание, что при удалении cookie не нужно указывать значение cookie.

Строка cookie

Свойство document.cookie выглядит как обычная текстовая строка, но это не так.

Даже если вы запишете полную строку cookie в document.cookie, при повторном чтении информации о cookie она отображается в виде пар имя/значение.

Если вы установите новый cookie, старый cookie не будет перезаписан. Новый cookie будет добавлен в document.cookie, поэтому, если вы снова прочитаете document.cookie, вы получите данные, как показано ниже:

cookie1=value; cookie2=value;

     

Если вам нужно найти конкретное значение cookie, вы должны создать функцию JavaScript для поиска значения cookie в строке cookie.

Примеры работы с cookie в JavaScript

В следующих примерах мы создадим cookie для хранения имён посетителей.

Сначала, когда посетитель заходит на веб-страницу, его попросят ввести своё имя. Имя будет сохранено в cookie.

При следующем посещении страницы посетитель увидит приветственное сообщение.

В этом примере мы создадим 3 функции JavaScript:

  1. Функция для установки значения cookie
  2. Функция для получения значения cookie
  3. Функция для проверки значения cookie

Функция для установки значения cookie

Сначала мы создаём функцию для сохранения имени посетителя:

function setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = "expires="+d.toGMTString(); document.cookie = cname + "=" + cvalue + "; " + expires; }

Разбор функции:

В приведённых выше параметрах функции имя cookie — cname, значение cookie — cvalue, а время истечения cookie задаётся в expires.

Эта функция задаёт имя cookie, значение cookie и время истечения cookie.

Функция для получения значения cookie

Затем мы создаём функцию, возвращающую значение указанного cookie:

function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name)==0) return c.substring(name.length,c.length); } return ""; }

Разбор функции:

Параметр имени cookie — cname.

Создайте текстовую переменную для поиска указанного cookie: cname + "=".

Используйте точки с запятой для разделения строки document.cookie и присвойте полученный массив строк переменной ca (ca = document.cookie.split(';')).

Пройдите в цикле по массиву ca (i=0;i<ca.length;i++), затем прочитайте каждое значение в массиве и удалите начальные и конечные пробелы (c=ca[i].trim()).

Если cookie найден (c.indexOf(name) == 0), верните значение cookie (c.substring(name.length, c.length)).

Если cookie не найден, верните "".

Функция для проверки значения cookie

Наконец, мы можем создать функцию для проверки, был ли создан cookie.

Если cookie установлен, будет отображено приветственное сообщение.

Если cookie не установлен, будет показано всплывающее окно с запросом имени посетителя, и будет вызвана функция setCookie, чтобы сохранить имя посетителя на 365 дней:

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.toGMTString(); document.cookie = cname+"="+cvalue+"; "+expires; } function getCookie(cname){ var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i].trim(); 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,30); } } }

Попробуйте сами »

Следующий пример выполняет функцию checkCookie() при загрузке страницы.

Другие расширения