Session storage
- Объект веб-хранилища позволяет хранить пары ключ/значение (в строковом виде) в браузере.
- Значения сохраняются после обновления страницы.
- Не отправляются на сервер каждый раз, хранятся в браузере, до 5Мб данных.
- Другая вкладка с той же страницей будет иметь другое хранилище.
- Данные продолжают существовать после перезагрузки страницы, но не после закрытия/открытия вкладки.
Local storage
- Объект веб-хранилища позволяет хранить пары ключ/значение (в строковом виде) в браузере.
- Значения сохраняются после перезапуска браузера.
- Не отправляются на сервер каждый раз, хранятся в браузере, до 5Мб данных.
- Этот объект один на все вкладки и окна в рамках источника.
- Данные не имеют срока давности, по которому истекают и удаляются.
Methods & properties LS и SS
- setItem(key, value) – сохранить пару ключ/значение.
- getItem(key) – получить данные по ключу key.
- removeItem(key) – удалить данные с ключом key.
- clear() – удалить всё.
- key(index) – получить ключ на заданной позиции.
- length – количество ключей в хранилище.
Work with LS & SS
Поскольку значения хранятся только в строках, мы можем использовать методы JSON.stringify() и JSON.parse( localStorage.user )
Storage event
Когда обновляются данные в localStorage или sessionStorage, генерируется событие storage.
Важно: событие срабатывает на всех остальных объектах window, где доступно хранилище, кроме того окна, которое его вызвало.
Storage event properties
- key – ключ, который обновился (null, если вызван .clear()).
- oldValue – старое значение (null, если ключ добавлен впервые).
- newValue – новое значение (null, если ключ был удалён).
- url – url документа, где произошло обновление.
- storageArea – объект localStorage или sessionStorage, где произошло обновление.
document.cookie
Небольшие строки данных, которые хранятся непосредственно в браузере. Они являются частью HTTP-протокола.
Один из наиболее частых случаев использования куки – это аутентификация.
Доступ к куки непосредственно из браузера устанавливается, используя свойство document.cookie.
Cookie features
- Операция записи изменяет только то куки, которое было указано.
- Имя и значение куки должны быть закодированы.
- Одно куки вмещает до 4kb данных, разрешается более 20 куки на сайт (зависит от браузера).
Cookie settings
- path=/, по умолчанию устанавливается текущий путь, делает куки видимым только по указанному пути и ниже.
- domain=site.com, по умолчанию куки видно только на текущем домене, если явно указан домен, то куки видно и на поддоменах.
- expires или max-age устанавливает дату истечения срока действия, без них куки умрёт при закрытии браузера.
- secure делает куки доступным только при использовании HTTPS.
- samesite запрещает браузеру отправлять куки с запросами, поступающими извне, помогает предотвратить XSRF-атаки.
