19.2 Формы хранения состояния в браузере

В этом примере один и тот же пользовательский жест изменяет состояние приложения, но результат этого изменения существует в разных формах. Форма хранения определяет, в каких контекстах состояние доступно, как оно разделяется между вкладками и как используется при повторных запусках страницы.
Клики (sessionStorage): 0
Клики (localStorage): 0

Точки наблюдения

  1. Откройте страницу в двух вкладках одного браузера.
  2. Обратите внимание, что оба счётчика инициализируются при загрузке страницы.
  3. Изменяйте состояние в одной вкладке и наблюдайте реакцию другой.
  4. Зафиксируйте, какой счётчик изменяется только локально.
  5. Перезагрузите вторую вкладку и сравните восстановленные значения.

Наблюдаемый эффект

Значение, сохранённое в sessionStorage, существует только в рамках текущей вкладки и не передаётся другим процессам исполнения. Значение, сохранённое в localStorage, разделяется между вкладками одного происхождения и автоматически становится доступным другим контекстам. Один и тот же жест пользователя формирует состояния с разной областью видимости, что показывает роль формы хранения в архитектуре браузера.