Веб-браузеры позволяют на пользовательском клиенте хранить небольшой объём информации, который называется Cookies. С помощью них удобно хранить настройки пользователя, например выбранную тему оформления, просмотренные ним товары и т.д. У Cookies есть свои достоинства и недостатки, как у всего в этом мире. К достоинствам можно отнести то, что вам не нужно хранить не очень важную инфомрацию на сервере. Это снижает нагрузку на сервер и экономит на нём дисковое пространство.
Но недостатков, к сожалению, больше. Доступ к Cookies может получить любой другой сценарий, запущенный на компьютере пользователя (даже если он не устанавливал Cookies), поэтому там нельзя хранить конфиденциальную информацию, например признак аутентификации, номера кредитных карт, пароли и т.д. К тому же, если пользователь запустит другой браузер на компьютере, то данные, сохранённые в Cookies, станут недоступными.
Прежде чем приступить к использованию Cookies, нужно проверить, поддерживает ли их браузер клиента:
if (navigator.cookieEnabled) {
// Cookies поддерживаются, можно устанавливать и читать их
}
Установить Cookies можно путём присвоения значения свойству cookie объекта document в следующем формате:
document.cookie = "<Имя>=<Значение>; [expires=<Дата>;] [domain=<Имя домена>;] [path=<Путь>;] [secure;]";
В самом простом случае нужно указать пару <Имя>=<Значение>. В чуть более сложном - дату истечения ссрока действия. Дату нужно указывать только в таком формате:
Mon, 23 Feb 2019 00:05:07 GMT
По истечении данной даты Cookie будет удалён. Получить дату в этом формате (чтоб не создавать её вручную) можно с помощью метода setTime() и метода toGMTString(). Пример:
let newDate = new Date();
newDate.setTime(newDate.getTime() + 36000000); // Срок действия Cookie - 10 часов
let endDate = newDate.toGMTString(); // Дата удаления cookies
Считать Cookie можно посредством обращения к document.cookie. Возвращённая строка будет содержать все установленные Cookie в формате "имя1=значение1; имя2=значение2".
Для удаления Cookie, следует установить его с истекшей датой. Другого способа пока не существует.
Для облегчения работы с Cookies можно воспользоваться функциями, представленными ниже. Используя их, можно быстро установить, прочитать и удалить Cookie.
function setCookie(name, value, expire, path, domain, secure) {
if(!name || !value) {
return false;
}
var str = name + '=' + encodeURIComponent(value);
if(expire) {
str += '; expires=' + expire.toGMTString();
}
if (path) {
str += '; path=' + path;
}
if(domain) {
str += '; domain=' + domain;
}
if (secure) {
str += '; secure';
}
document.cookie = str;
return true;
}
function getCookie(name) {
var pattern = "(?:; )?" + name + "=([^;]*);?";
var regexp = new RegExp(pattern);
if(regexp.test(document.cookie)) {
return decodeURIComponent(RegExp["$1"]);
}
return false;
}
function deleteCookie(name, path, domain) {
setCookie(name, null, new Date(0), path, domain);
return true;
}
Запускаются функции следующим образом:
- Устанавливаем Cookies без параметров, только имя и значение
setCookie('color', 'red');
- Производим чтение Cookie:
var color = getCookie('color');
- Выводим Cookie:
window.alert(color);