Работа с Cookies с помощью Javascript

Работа с Cookies с помощью Javascript

Веб-браузеры позволяют на пользовательском клиенте хранить небольшой объём информации, который называется Cookies. С помощью них удобно хранить настройки пользователя, например выбранную тему оформления, просмотренные ним товары и т.д. У Cookies есть свои достоинства и недостатки, как у всего в этом мире.

Веб-браузеры позволяют на пользовательском клиенте хранить небольшой объём информации, который называется 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);