WebStorage API

Question 1

Session storage

Answer 1

• Объект веб-хранилища позволяет хранить пары ключ/значение (в строковом виде) в браузере.
• Значения сохраняются после обновления страницы.
• Не отправляются на сервер каждый раз, хранятся в браузере, до 5Мб данных.
• Другая вкладка с той же страницей будет иметь другое хранилище.
• Данные продолжают существовать после перезагрузки страницы, но не после закрытия/открытия вкладки.

Question 2

Local storage

Answer 2

• Объект веб-хранилища позволяет хранить пары ключ/значение (в строковом виде) в браузере.
• Значения сохраняются после перезапуска браузера.
• Не отправляются на сервер каждый раз, хранятся в браузере, до 5Мб данных.
• Этот объект один на все вкладки и окна в рамках источника.
• Данные не имеют срока давности, по которому истекают и удаляются.

Question 3

Methods & properties LS и SS

Answer 3

• setItem(key, value) – сохранить пару ключ/значение.
• getItem(key) – получить данные по ключу key.
• removeItem(key) – удалить данные с ключом key.
• clear() – удалить всё.
• key(index) – получить ключ на заданной позиции.
• length – количество ключей в хранилище.

Question 4

Work with LS & SS

Answer 4

Поскольку значения хранятся только в строках, мы можем использовать методы JSON.stringify() и JSON.parse( localStorage.user )

Question 5

Storage event

Answer 5

Когда обновляются данные в localStorage или sessionStorage, генерируется событие storage.

Важно: событие срабатывает на всех остальных объектах window, где доступно хранилище, кроме того окна, которое его вызвало.

Question 6

Storage event properties

Answer 6

• key – ключ, который обновился (null, если вызван .clear()).
• oldValue – старое значение (null, если ключ добавлен впервые).
• newValue – новое значение (null, если ключ был удалён).
• url – url документа, где произошло обновление.
• storageArea – объект localStorage или sessionStorage, где произошло обновление.

Question 7

document.cookie

Answer 7

Небольшие строки данных, которые хранятся непосредственно в браузере. Они являются частью HTTP-протокола.

Один из наиболее частых случаев использования куки – это аутентификация.

Доступ к куки непосредственно из браузера устанавливается, используя свойство document.cookie.

Question 8

Cookie features

Answer 8

• Операция записи изменяет только то куки, которое было указано.
• Имя и значение куки должны быть закодированы.
• Одно куки вмещает до 4kb данных, разрешается более 20 куки на сайт (зависит от браузера).

Question 9

Cookie settings

Answer 9

• path=/, по умолчанию устанавливается текущий путь, делает куки видимым только по указанному пути и ниже.
• domain=site.com, по умолчанию куки видно только на текущем домене, если явно указан домен, то куки видно и на поддоменах.
• expires или max-age устанавливает дату истечения срока действия, без них куки умрёт при закрытии браузера.
• secure делает куки доступным только при использовании HTTPS.
• samesite запрещает браузеру отправлять куки с запросами, поступающими извне, помогает предотвратить XSRF-атаки.