Cookie JavaScript

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

Что такое Cookie?

Cookie - это небольшой текстовый файл, который позволяет вам хранить небольшое количество данных на компьютере пользователя (примерно 4KB).

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

Cookie были изобретены для решения проблемы "как запомнить информацию о пользователе".

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

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

username = Seagull

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

Создание куки с помощью JavaScript

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

Так можно создать куки:

　　document.cookie = "username=Seagull";

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

　　document.cookie = "username=Seagull; expires=Mon, 25 Mar 2019 12:00:00 UTC";

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

　　document.cookie = "username=Seagull; expires=Mon, 25 Mar 2019 12:00:00 UTC; path=/";

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

В JavaScript можно так читать cookie:

　　var x = document.cookie;

Чтение cookie несколько сложнее, потому чтоdocument.cookieСвойства возвращают одну строку, содержащую список всех cookie, разделенных пробелами и точками с запятой (например, name=value; cookie1=value; cookie2=value). Чтобы получить отдельный cookie из этого списка, вам нужно использоватьsplit()Метод его разбиения на отдельные name = value пары и поисков конкретного имени.

Эта строка не содержит свойств, таких как expires, path, domain и т.д., возможно, они уже относятся к набору Cookie.

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

Единственный способ изменить или изменить cookie - создать новый с тем же name и path, что и существующий.

　　document.cookie = "username=Ankit; expires=Mon, 25 Mar 2019 12:00:00 UTC; path=/";

Внимание:Создание cookie с тем же name, но отличным path не изменит существующие cookie, а добавит дополнительный cookie.

Удаление Cookie с помощью JavaScript

Удаление Cookie очень легко. Удаление Cookie:

• Достаточно просто использовать прежние настройки name и указать пустое значение

• Или установите параметр expires на прошедшую дату

　　document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

Пamiętaj, jeśli w path cookie ustawiono inne atrybuty, podczas usuwania ich również należy je uwzględnić.

Пример JavaScript Cookie

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

Когда пользователь впервые посещает эту веб-страницу, он будет просят ввести свое имя. Затем это имя будет сохранено в cookie.

Следующий раз, когда пользователь посещает одну и ту же страницу, он получит значение, хранящееся в cookie.

Для примера мы создадим 2 функции JavaScript:

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

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

Сохранение cookie

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

function setCookie(cname, cvalue) {
　　var now = new Date();
　　now.setMonth(now.getMonth() + 1);
　　var expires = "expires="+ now.toUTCString();
　　document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

Описание функции:

Параметрами функции являются имя cookie (cname) и значение cookie (cvalue).

Эта функция устанавливает cookie, добавляя имя cookie, значение cookie и строку expires (1 месяц).

Чтение cookie

Затем, мы создаем функцию, которая отображает значение конкретного cookie.

function getCookie(cname) {
　　var allcookies = document.cookie;
　　cookieArr = allcookies.split(';');
　　for(var i = 0; i < cookieArr.length; i++) {
　　　　　var cookiePair = cookieArr[i].split('=');
　　　　　if(cname == cookiePair[0].trim()) {
　　　　　　　　document.write('Key is: ' + cookiePair[0] + ' and Value is: ' + cookiePair[1]);
　　　　　}
　　}
}

Описание функции:

Эта функция принимает cookie имя в качестве параметра (cname).

Получите все cookie (allcookies = document.cookie).

Разделите document.cookie на массив cookieArr по точке с запятой (cookieArr = allcookies.split（';'）).

Пройдемся по массиву cookieArr (i = 0; i <cookieArr.length; i ++), и прочтем каждый элемент (cookiePair = cookieArr [i]).

Если найден cookie (cname == cookiePair [0]), то写入cookie ключа и значения (cookiePair [0]，cookiePair [1]).

Собрано вместе

function setCookie(cname, cvalue) {
　　var now = new Date();
　　now.setMonth(now.getMonth() + 1);
　　var expires = "expires="+ now.toUTCString();
　　document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
　　var allcookies = document.cookie;
　　cookieArr = allcookies.split(';');
　　for(var i = 0; i < cookieArr.length; i++) {
　　　　　var cookiePair = cookieArr[i].split('=');
　　　　　if(cname == cookiePair[0].trim()) {
　　　　　　　　　　　document.write('Key is: ' + cookiePair[0] + ' and Value is: ' + cookiePair[1]);
　　　　　}
　　}
}

Свойства Cookies

Cookies — это текстовые записи с пятью свойствами: