API хранилища веб-страницы

API хранилища веб-страницы предоставляет механизмы, с помощью которых браузеры могут хранить пары ключ/значение более интуитивно, чем с помощью куки.

Два механизма в хранилище веб-страницы таковы:

• sessionStorage поддерживает отдельный хранилище для каждого заданного происхождения, доступного в течение сеанса страницы (пока открыта вкладка браузера, включая перезагрузки и восстановление страниц).

• localStorage делает то же самое, но сохраняется даже после закрытия и повторного открытия браузера.

Эти механизмы доступны через свойства Window.sessionStorage и Window.localStorage. Вызов одного из них вернет экземпляр объекта Storage, с помощью которого можно устанавливать, получать и удалять элементы данных. Отдельный объект хранилища используется для sessionStorage и localStorage для каждого происхождения — они функционируют и управляются раздельно.

Чтобы узнать о количестве доступного хранилища с использованием API и о том, что происходит при превышении ограничений хранилища, см. Квоты хранилища и критерии удаления.

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

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

Асинхронные альтернативы, такие как IndexedDB, могут быть более подходящими для случаев, когда производительность является проблемой или когда требуется работа с большими наборами данных. Эти альтернативы позволяют выполнять операции без блокировки, обеспечивая более плавный пользовательский опыт и лучшую производительность веб-приложений.

У каждого происхождения есть собственное хранилище — это справедливо как для хранилища веб-страницы, так и для хранилища общего пользования. Однако доступ кода третьей стороны (то есть встроенного) к хранилищу общего пользования зависит от его контекста просмотра. Контекст, в котором выполняется код третьей стороны из другого происхождения, определяет доступ к хранилищу третьей стороны.

Код третьей стороны можно добавить на другой сайт, вставив его с помощью элемента <script> или установив источник <iframe> на сайт, содержащий код третьей стороны. Используемый метод интеграции кода третьей стороны определяет контекст просмотра кода.

• Если ваш код третьей стороны добавлен на другой сайт с элементом <script>, ваш код будет выполняться в контексте просмотра внедрения. Следовательно, когда вы вызываете Storage.setItem() или SharedStorage.set(), пара ключ/значение будет записана в хранилище внедрения. С точки зрения браузера нет разницы между кодом первой стороны и кодом третьей стороны, когда используется тег <script>.
• Когда ваш код третьей стороны добавлен на другой сайт внутри <iframe>, код внутри <iframe> будет выполняться с происхождением контекста просмотра <iframe>. Если код внутри <iframe> вызывает Storage.setItem(), данные будут записаны в локальное или сеансовое хранилище происхождения <iframe>. Если код <iframe> вызывает SharedStorage.set(), данные будут записаны в хранилище общего пользования происхождения <iframe>.

Storage

Позволяет устанавливать, извлекать и удалять данные для определенного домена и типа хранилища (сеанса или локального).

Window

API хранилища веб-страницы расширяет объект Window двумя новыми свойствами — Window.sessionStorage и Window.localStorage — которые предоставляют доступ к сеансовым и локальным объектам хранилища текущего домена Storage соответственно, а также обработчик события storage, который срабатывает при изменении хранилища (например, при хранении нового элемента).

StorageEvent

Событие storage срабатывает на объекте Window документа при изменении области хранилища.

Чтобы проиллюстрировать типичное использование хранилища веб-страницы, мы создали пример, назовем его Демонстрация хранилища веб-страницы. Главная страница предоставляет элементы управления, с помощью которых можно настраивать цвет, шрифт и декоративное изображение. При выборе разных параметров страница мгновенно обновляется; кроме того, ваши варианты сохраняются в localStorage, так что когда вы покинете страницу и загрузите ее позже, ваши варианты сохранятся.

Кроме того, мы предоставили страницу вывода событий — если вы загрузите эту страницу в другой вкладке, а затем внесете изменения в свои варианты на главной странице, вы увидите обновленную информацию о хранилище, так как срабатывает событие StorageEvent.

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

• Использование API хранилища веб-страницы
• Квоты хранилища браузера и критерии удаления