JS. LocalStorage, SessionStorage

Сегодня мы познакомимся с такими понятиями как LocalStorage и SessionStorage. Это некое хранилище в браузере для получения определенных данных пользователя без обращения к серверу или базе данных. В браузере эти данные хранятся в виде обьекта, который имеет соответствующее название.

Посмотреть на эти обьекты в браузере можно в панели разработчика, в разделе Application.

В чем разница между LocalStorage и SessionStorage? Ответ: разница только в продолжительности существования. SessionStorage, как можно понять из названия существует только пока работает браузер, после его закрытия все данные удаляются. LocalStorage существует до тех пор пока пользователь принудительно не очистит эти данные, либо удалит сам браузер.

В этих обьектах данные хранятся в формате "Ключ - значение". Например мы можем задать:
localStorage.setItem('myKey', 'myValue');
Тепер нам доступно значение 'myValue' с ключом 'myKey'. Получить его мы можем следующим образом:
localStorage.getItem('myKey');
Так же получить значение можно обратившись напрямую к localStorage с ключом в качестве свойства:
localStorage.myKey;
Это отработает абсолютно аналогичным образом, но так делать я вам не советую из за определённых подводных камней на которые можно напоротся если обратится к несуществующей записи. Разница между обращением напрямую к свойству или к методу getItem в возвращаемых значениях если запись отсутствует. Свойство возвращаеет "undefined", в то время как метод вернет "null". При попытке распарсить данные из формата JSON "undefined" выдаст ошибку в рантайм и остановит весь скрипт, а "null" просто вернет "null" и продолжит выполнение скрипта. В общем в дебри вдаваться не будем, просто имейте ввиду что лучше использовать готовые методы которые предоставляет LocalStorage.

Так же мы можем удалять данные из LocalStorage и SessionStorage. Делается это следующим образом:
localStorage.removeItem('myKey');

Если необходимо можна очистить весь LocalStorage, а не какой то один конкретный Item:
localStorage.clear();

Вот такие они эти LocalStorage и SessionStorage.