Здравствуйте! В этом уроке рассмотрим объекты веб-хранилища localStorage и sessionStorage, которые позволяют хранить пары ключ/значение в браузере.
Что в них важно – данные, которые в них записаны, сохраняются после обновления страницы (в случае sessionStorage) и даже после перезапуска браузера (при использовании localStorage). Скоро мы это увидим.
Но ведь у нас уже есть куки. Зачем тогда эти объекты?
- В отличие от куки, объекты веб-хранилища не отправляются на сервер при каждом запросе. Поэтому мы можем хранить гораздо больше данных. Большинство браузеров могут сохранить как минимум 2 мегабайта данных (или больше), и этот размер можно поменять в настройках.
- Ещё одно отличие от куки – сервер не может манипулировать объектами хранилища через HTTP-заголовки. Всё делается при помощи JavaScript.
- Хранилище привязано к источнику (домен/протокол/порт). Это значит, что разные протоколы или поддомены задают разные объекты хранилища, и они не могут получить доступ к данным друг друга.
Объекты хранилища localStorage и sessionStorage предоставляют одинаковые методы и свойства:
- setItem(key, value) – сохранить пару ключ/значение.
- getItem(key) – получить данные по ключу key.
- removeItem(key) – удалить данные с ключом key.
- clear() – удалить всё хранилище.
- key(index) – получить ключ на заданной позиции.
- length – количество элементов в хранилище.
Как видим, интерфейс похож на Map (setItem/getItem/removeItem), но также запоминается порядок элементов, и можно получить доступ к элементу по индексу – key(index).
Давайте посмотрим, как это работает. Читать далее
