В течение многих лет многим веб-разработчикам приходилось хранить данные на клиенте. До появления HTML5 и его новых механизмов каждый разработчик использовал куки для достижения этой цели. К сожалению, работа с файлами cookie в JavaScript может вызвать много головной боли. В этой статье обсуждаются, что такое куки, и как вы можете создавать функции для их создания, извлечения и удаления.
Что такое куки?
Файл cookie — это фрагмент данных, который отправляется с веб-сайта и хранится локально в браузере пользователя. Файлы cookie необходимы, потому что HTTP не имеет состояния . Это означает, что сам HTTP не может отслеживать предыдущие действия пользователя. Один из способов создания состояния — использование файлов cookie.
Использовать куки или не использовать куки
Сегодня большинство, если не все, веб-сайты по всему миру используют файлы cookie. Однако файлы cookie довольно ограничены, поскольку они могут хранить только до 4 КБ данных. Более того, многие разработчики утверждают, что поскольку куки-файлы отправляются на сервер с каждым HTTP-запросом, большие могут потреблять значительную пропускную способность сети, снижая производительность . Еще одна важная критика в отношении файлов cookie была написана Реми Шарпом в соавторстве с книгой « Введение в HTML5» . Это может быть потенциально катастрофическим для мобильных соединений. Еще один важный момент, о котором следует помнить, это то, что если у вас есть европейские посетители, то ваш сайт должен соответствовать Директиве ЕС об электронной конфиденциальности от 26 мая 2012 года. Если вы никогда не слышали об этом, посмотрите, почему ваш сайт сейчас незаконен. в европе .
В последние годы много думали о поиске альтернативы куки. Благодаря HTML5 на сцене появились новые методы. Первый из них — это API-интерфейс Web Storage , в котором есть методы для хранения пар имя-значение. Для обзора API веб-хранилища я советую вам прочитать Обзор API веб-хранилища . Второй альтернативой является API базы данных Web SQL , который хранит данные в базах данных, которые могут быть запрошены с использованием варианта SQL. Хотя Web SQL хорошо поддерживается , стандарт больше не поддерживается. Наконец, что не менее важно , это API Indexed Database , который определяет базу данных записей, содержащих простые значения и иерархические объекты. Вы можете прочитать больше о IndexedDB в разделе « Закрыть» и «Лично» с помощью HTML5 IndexedDB . К сожалению, IndexedDB не поддерживается широко , поэтому вам, вероятно, не следует полагаться на него.
Независимо от ваших предпочтений, есть несколько важных моментов для понимания. Хотя все эти API предоставляют локальное хранилище, похожее на файлы cookie, они не отправляют свои данные обратно на сервер. Таким образом, в большинстве случаев вы будете использовать как файлы cookie, так и один из API-интерфейсов хранилища. Технически, те же эффекты могут быть достигнуты с помощью AJAX , но это усложняет задачу и требует дополнительного кода.
Как печенья сделаны
Структура куки действительно проста. Это всего лишь несколько пар ключ-значение. Пары разделяются точкой с запятой, а знак равенства отделяет ключ от его значения. Куки может по желанию иметь срок годности, после которого они удаляются. Если срок действия не указан, cookie будет действовать до закрытия сеанса или браузера. Если вы установили дату истечения срока действия в прошлом, браузер удалит cookie. Обратите внимание, что формат даты важен, так как он должен быть в UTC / GMT. Кроме того, вы можете указать домен и путь, по которому cookie может быть прочитан и записан. По умолчанию значение пути равно ‘/’, что означает, что cookie виден всем путям в данном домене. Если вы не укажете домен, он будет принадлежать странице, на которой установлен файл cookie. То, как вы устанавливаете эти данные, также имеет значение. Порядок должен быть:
key-value;expiration_date;path;domain; ,
В следующем примере показан файл cookie, который доступен во всех путях домена и имеет только одну пару ключ-значение.
посещения = 3; Путь = /;
В следующем примере показан файл cookie, который доступен по всем путям домена (по умолчанию) и срок его действия истекает 31 октября 2012 года в 11 часов утра.
Последнее посещение = понедельник, 15 октября 2012 г. 19:36:00 по Гринвичу; истекает = ср, 31 октября 2012 г. 11:00:00 по Гринвичу;
Скриптовые куки
Пока я объяснил, что такое куки, а также некоторые их плюсы и минусы. Теперь пришло время посмотреть, какие функции JavaScript предоставляет для работы с ними. К сожалению, первое, что я должен сказать, это то, что в JavaScript нет нативных методов для простой работы с куки. JavaScript может создавать, извлекать и удалять файлы cookie, используя свойство document.cookie , но использовать его не очень приятно. Каждый раз, когда вы вынуждены иметь дело с split() , substring() и for циклов. Обратите внимание: хотя вы можете рассматривать document.cookie как строковую переменную, на самом деле это нечто большее. Например, возьмите следующий скрипт:
document.cookie = "visits=3; path=/;"; document.cookie = "last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;";
Если вы затем распечатаете document.cookie , вы получите неожиданный результат, как показано ниже:
console.log(document.cookie); // print visits=3; last-visit=Mon, 15 Oct 2012 19:36:00
К настоящему времени вы столкнулись с трудностями работы с файлами cookie в JavaScript. Итак, пришло время создавать наши собственные функции, чтобы легко ими управлять. Следующая функция поможет вам создать cookie. Обратите внимание, что параметр expires может быть экземпляром объекта Date или числом, указывающим количество дней. Последний может быть отрицательным числом, которое устанавливает дату истечения в прошлом.
function createCookie(name, value, expires, path, domain) { var cookie = name + "=" + escape(value) + ";"; if (expires) { // If it's a date if(expires instanceof Date) { // If it isn't a valid date if (isNaN(expires.getTime())) expires = new Date(); } else expires = new Date(new Date().getTime() + parseInt(expires) * 1000 * 60 * 60 * 24); cookie += "expires=" + expires.toGMTString() + ";"; } if (path) cookie += "path=" + path + ";"; if (domain) cookie += "domain=" + domain + ";"; document.cookie = cookie; }
Вы можете вызвать эту функцию, как показано ниже.
createCookie("website", "audero.it", new Date(new Date().getTime() + 10000)); createCookie("author", "aurelio", 30);
Теперь, когда вы установили cookie-файл, вам необходимо получить его. Вы сделаете это, используя данный ключ и следующую getCookie() . Возвращает значение ключа, если он найден, и null противном случае.
function getCookie(name) { var regexp = new RegExp("(?:^" + name + "|;\s*"+ name + ")=(.*?)(?:;|$)", "g"); var result = regexp.exec(document.cookie); return (result === null) ? null : result[1]; }
Использовать getCookie() очень просто. Вы просто передаете ключ в качестве параметра, как показано ниже.
console.log(getCookie("author")); // print aurelio console.log(getCookie("nothing")); // print null
Теперь нам нужна последняя функция для удаления куки. Показанная функция очень проста, потому что она использует getCookie() для проверки, задано ли заданное имя, и createCookie() чтобы установить дату истечения срока действия в прошлом.
function deleteCookie(name, path, domain) { // If the cookie exists if (getCookie(name)) createCookie(name, "", -1, path, domain); }
Учитывая эту функцию, чтобы удалить куки, вы можете просто написать:
deleteCookie("author"); console.log(getCookie("author")); // now print null
Используя показанные функции, вы сможете легко управлять файлами cookie. Интернет также полон множества других функций обработки файлов cookie. Из множества функций, которые вы можете найти, я бы хотел показать те, которые написаны Питером-Полем Кохом (PPK), гуру фронтэнда , на quirksmode.com . Я хотел бы поблагодарить его за то, что он позволил мне включить их в эту статью. Функция PPK для создания куки показана ниже.
function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; })function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; }
Точно так же, чтобы получить cookie, используйте следующую функцию.
function readCookie(name) { var nameEQ = name + "="; 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,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }
И это функция для удаления куки.
function eraseCookie(name) { createCookie(name,"",-1); }
Выводы
В этой статье вы узнали, что такое куки, как они сделаны, а также их сильные и слабые стороны. Вы также видели, как вы можете обращаться с файлами cookie с помощью пользовательских функций. Как я также указывал в моей предыдущей статье , в JavaScript отсутствуют некоторые основные вспомогательные функции. К счастью, вы можете легко создавать свои собственные или искать в Интернете, чтобы решить ваши проблемы.