What is document cookie in javascript

JavaScript Cookies

When a browser requests a web page from a server, cookies belonging to the page are added to the request. This way the server gets the necessary data to «remember» information about users.

None of the examples below will work if your browser has local cookies support turned off.

Create a Cookie with JavaScript

JavaScript can create, read, and delete cookies with the document.cookie property.

With JavaScript, a cookie can be created like this:

You can also add an expiry date (in UTC time). By default, the cookie is deleted when the browser is closed:

With a path parameter, you can tell the browser what path the cookie belongs to. By default, the cookie belongs to the current page.

Read a Cookie with JavaScript

With JavaScript, cookies can be read like this:

document.cookie will return all cookies in one string much like: cookie1=value; cookie2=value; cookie3=value;

Change a Cookie with JavaScript

With JavaScript, you can change a cookie the same way as you create it:

The old cookie is overwritten.

Delete a Cookie with JavaScript

Deleting a cookie is very simple.

You don’t have to specify a cookie value when you delete a cookie.

Just set the expires parameter to a past date:

You should define the cookie path to ensure that you delete the right cookie.

Some browsers will not let you delete a cookie if you don’t specify the path.

The Cookie String

The document.cookie property looks like a normal text string. But it is not.

Even if you write a whole cookie string to document.cookie, when you read it out again, you can only see the name-value pair of it.

If you set a new cookie, older cookies are not overwritten. The new cookie is added to document.cookie, so if you read document.cookie again you will get something like:

cookie1 = value; cookie2 = value;

Display All Cookies Create Cookie 1 Create Cookie 2 Delete Cookie 1 Delete Cookie 2

If you want to find the value of one specified cookie, you must write a JavaScript function that searches for the cookie value in the cookie string.

JavaScript Cookie Example

In the example to follow, we will create a cookie that stores the name of a visitor.

The first time a visitor arrives to the web page, he/she will be asked to fill in his/her name. The name is then stored in a cookie.

The next time the visitor arrives at the same page, he/she will get a welcome message.

For the example we will create 3 JavaScript functions:

1. A function to set a cookie value
2. A function to get a cookie value
3. A function to check a cookie value

A Function to Set a Cookie

First, we create a function that stores the name of the visitor in a cookie variable:

Example

function setCookie(cname, cvalue, exdays) <
const d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
let expires = «expires=»+ d.toUTCString();
document.cookie = cname + «=» + cvalue + «;» + expires + «;path=/»;
>

Example explained:

The parameters of the function above are the name of the cookie (cname), the value of the cookie (cvalue), and the number of days until the cookie should expire (exdays).

The function sets a cookie by adding together the cookiename, the cookie value, and the expires string.

A Function to Get a Cookie

Then, we create a function that returns the value of a specified cookie:

Example

function getCookie(cname) <
let name = cname + «=»;
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(‘;’);
for(let i = 0; i let c = ca[i];
while (c.charAt(0) == ‘ ‘) <
c = c.substring(1);
>
if (c.indexOf(name) == 0) <
return c.substring(name.length, c.length);
>
>
return «»;
>

Function explained:

Take the cookiename as parameter (cname).

Create a variable (name) with the text to search for (cname + «=»).

Decode the cookie string, to handle cookies with special characters, e.g. ‘$’

Split document.cookie on semicolons into an array called ca (ca = decodedCookie.split(‘;’)).

If the cookie is found (c.indexOf(name) == 0), return the value of the cookie (c.substring(name.length, c.length).

If the cookie is not found, return «».

A Function to Check a Cookie

Last, we create the function that checks if a cookie is set.

If the cookie is set it will display a greeting.

If the cookie is not set, it will display a prompt box, asking for the name of the user, and stores the username cookie for 365 days, by calling the setCookie function:

Example

function checkCookie() <
let username = getCookie(«username»);
if (username != «») <
alert(«Welcome again » + username);
> else <
username = prompt(«Please enter your name:», «»);
if (username != «» && username != null) <
setCookie(«username», username, 365);
>
>
>

All Together Now

Example

function setCookie(cname, cvalue, exdays) <
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = «expires=»+d.toUTCString();
document.cookie = cname + «=» + cvalue + «;» + expires + «;path=/»;
>

function getCookie(cname) let name = cname + «=»;
let ca = document.cookie.split(‘;’);
for(let i = 0; i < ca.length; i++) let c = ca[i];
while (c.charAt(0) == ‘ ‘) c = c.substring(1);
>
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
>
>
return «»;
>

function checkCookie() let user = getCookie(«username»);
if (user != «») alert(«Welcome again » + user);
> else user = prompt(«Please enter your name:», «»);
if (user != «» && user != null) setCookie(«username», user, 365);
>
>
>

The example above runs the checkCookie() function when the page loads.

Источник

.cookie

Единственный доступ в банку с оставленными сервером печеньками.

Cookie — один из способов хранить данные в браузере. Обзор всех способов хранения описан в статье «Хранение данных в браузере».

Кратко

Скопировать ссылку «Кратко» Скопировано

При разработке сайтов часть информации (например, токен авторизации или данные пользователя) нужно хранить и читать как в браузере, так и на сервере. Для этого используют Cookie (произносится «куки»).

Куки передаются в виде HTTP-заголовка, это накладывает на них ограничения. Например, максимальный размер куки в 4096 байт или отсутствие в содержимом пробелов или запятых. Чтобы обезопасить содержимое, можно закодировать его с помощью функции encode U R I Component ( )

Как пользоваться

Скопировать ссылку «Как пользоваться» Скопировано

Все куки хранятся в свойстве document . cookie . Это свойство представляет собой строку в формате имя = значение , где пары имён и значений разделяются знаком ; . При этом взаимодействие с полем весьма необычное — если присвоить document . cookie новое значение, то оно не заменит полностью старую строку, а добавит или изменит значение по ключу.

Запись

Скопировать ссылку «Запись» Скопировано

Запись в cookie работает с помощью присвоения значения новой куки в поле document . cookie . За один раз можно записать лишь одно значение.

Вот так можно добавить значение 1 по ключу counter:

 document.cookie = 'counter=1'console.log(document.cookie)// 'counter=1' document.cookie = 'counter=1' console.log(document.cookie) // 'counter=1'    Скопировать Скопировано Не удалось скопировать   

При присвоении свойству куки с другим именем, получим два записанных значения:

 document.cookie = 'sidebar=false'console.log(document.cookie)// 'counter=1; sidebar=false;' document.cookie = 'sidebar=false' console.log(document.cookie) // 'counter=1; sidebar=false;'    Скопировать Скопировано Не удалось скопировать   

При повторной записи в то же поле другого значения оно будет перезаписано.

 document.cookie = 'sidebar=true'console.log(document.cookie)// -> 'counter=1; sidebar=true;' document.cookie = 'sidebar=true' console.log(document.cookie) // -> 'counter=1; sidebar=true;'    Скопировать Скопировано Не удалось скопировать   

При установке кук можно указывать не только её название и значение, но и другие параметры. Все они являются необязательными и разделяются точкой с запятой ;

• path – определяет путь, по которому будет доступна кука. Он должен быть абсолютным, то есть начинаться с / . Если параметр не передан, то кука будет доступна на всех страницах сайта.
• domain — определяет домен, для которого указана кука. Если не указано, то будет использоваться текущий домен.
• max — age и expires — определяет время жизни куки. max — age указывает, через сколько секунд, а expires указывает точное время, когда кука станет недействительна. Время для expires можно отформатировать с помощью встроенного метода даты Date . toUTC String ( )
• secure — указывает, что данная кука может быть передана только при запросах по защищённому протоколу HTTPS.
• samesite — определяет, может ли данная кука быть отправлена при кросс-доменном запросе. Значение параметра strict будет предотвращать отправку на другие домены, а lax разрешит отправлять куки с GET-запросами.

Есть пара ограничений при специфичных названиях кук. Если название куки начинается с _ _ Secure — , то обязательно должен быть передан параметр secure . При этом мы должны находиться на странице, которая была получена по HTTPS-протоколу. Если название куки начинается с _ _ Host — , то обязательно должны быть переданы параметры path = / и secure (страница также должна быть открыта по HTTPS-протоколу), а атрибут domain должен отсутствовать для снижения кроссдоменных уязвимостей.

Запись куки с разрешением передавать её только по HTTPS и только для текущего домена, со временем жизни в 1 час будет выглядеть так:

 document.cookie = 'sidebar=true;secure;samesite=strict;max-age=3600' document.cookie = 'sidebar=true;secure;samesite=strict;max-age=3600'    Скопировать Скопировано Не удалось скопировать   

Для установки куки, которая будет доступна на текущем домене и всех его поддоменах, используйте название текущего домена и поставьте точку в начале – .$

Чтение

Скопировать ссылку «Чтение» Скопировано

Для получения значений, записанных в куки, можно просто вывести содержимое document . cookie :

 console.log(document.cookie); console.log(document.cookie);    Скопировать Скопировано Не удалось скопировать   

Учитывая, что мы уже дважды записывали куки, при вызове команды выше в консоли выведется counter = 1; sidebar = true; .

Чтобы получить значение конкретной куки, нам нужно будет прочитать строки и разобрать её по значениям. Например, так:

 function getCookie()  return document.cookie.split('; ').reduce((acc, item) =>  const [name, value] = item.split('=') acc[name] = value return acc >, <>)> const cookie = getCookie() console.log(cookie.counter)// 1console.log(cookie.sidebar)// true function getCookie()  return document.cookie.split('; ').reduce((acc, item) =>  const [name, value] = item.split('=') acc[name] = value return acc >, >) > const cookie = getCookie() console.log(cookie.counter) // 1 console.log(cookie.sidebar) // true    Скопировать Скопировано Не удалось скопировать   

Удаление

Скопировать ссылку «Удаление» Скопировано

Для кук не предусмотрено специального метода удаления, поэтому для этого используется трюк с установкой кук с параметром expires который указывает на дату в прошлом. Браузер сразу же считает такую куку устаревшей и удаляет её:

 document.cookie = `sidebar=;expires=$` document.cookie = `sidebar=;expires=$new Date(0)>`    Скопировать Скопировано Не удалось скопировать   

В этом примере, передав число 0 в конструктор Date мы получаем время на начало эпохи Unix, а именно 1 января 1970 г. Поскольку эта дата из прошлого, то кука будет удалена моментально.

На практике

Скопировать ссылку «На практике» Скопировано

Павел Минеев советует

Скопировать ссылку «Павел Минеев советует» Скопировано

Есть куки, которые нельзя прочитать или записать из JavaScript. Если сервер устанавливает куки с параметром HttpOnly (доступен только для установки сервером), то такие куки будут недоступны в document . cookie . Как правило, такие куки используются для хранения чувствительной информации, как, например, токены для авторизации. Проверка авторизации происходит с помощью запроса с текущим авторизованным пользователем и считается при успешном ответе сервера.

Игорь Камышев советует

Скопировать ссылку «Игорь Камышев советует» Скопировано

Формат строки document . cookie не очень удобен для работы, поэтому обычно в проекте создают функции, которые упрощают чтение и запись кук. Чтобы не писать эти функции самостоятельно, можно взять библиотеку js-cookie — это совсем небольшая обёртка над стандартным браузерным API, которая здорово упрощает жизнь.

С этой библиотекой установка значения для куки выполняется так:

 import Cookies from "js-cookie"; Cookies.set("foo", "bar"); import Cookies from "js-cookie"; Cookies.set("foo", "bar");    Скопировать Скопировано Не удалось скопировать   

 import Cookies from "js-cookie"; const nameFromCookie = Cookies.get("name"); import Cookies from "js-cookie"; const nameFromCookie = Cookies.get("name");    Скопировать Скопировано Не удалось скопировать   

Конечно, под капотом эта библиотека тоже работает с document . cookie , но снаружи она предоставляет простой и удобный интерфейс.

Источник