веб-хранилище

Хранение данных на стороне клиента в веб-браузерах

Веб-хранилище , иногда называемое хранилищем DOM ( хранилище объектной модели документа ), представляет собой стандартный API JavaScript , предоставляемый веб-браузерами . Он позволяет веб-сайтам хранить постоянные данные на устройствах пользователей аналогично файлам cookie , но с гораздо большей емкостью ^[1] и без передачи информации в HTTP-заголовках . ^[2] Существует два основных типа веб-хранилищ: локальное хранилище и хранилище сеансов, которые ведут себя аналогично постоянным файлам cookie и сеансовым файлам cookie соответственно. Веб-хранилище стандартизировано Консорциумом World Wide Web (W3C) ^[3] и WHATWG , ^[4] и поддерживается всеми основными браузерами.

Функции

Веб-хранилище отличается от файлов cookie в некоторых ключевых аспектах.

Цель

Файлы cookie предназначены для связи с серверами; они автоматически добавляются ко всем запросам и доступны как на стороне сервера, так и на стороне клиента. Веб-хранилище подпадает исключительно под действие сценариев на стороне клиента . Данные веб-хранилища не передаются автоматически на сервер при каждом HTTP-запросе, и веб-сервер не может напрямую записывать данные в веб-хранилище. Однако любого из этих эффектов можно достичь с помощью явных сценариев на стороне клиента, позволяющих точно настроить желаемое взаимодействие с сервером.

Размер хранилища

Размер файлов cookie ограничен 4 килобайтами. Веб-хранилище обеспечивает гораздо большую емкость:

• Opera 10.50+ позволяет 5 МБ ^[1]
• Safari 8 позволяет 5 МБ ^[5]
• Firefox 34 допускает 10 МБ ^[5] (ранее 5 МБ на источник в 2007 году ^[6] )
• Google Chrome допускает 10 МБ на каждый источник (ранее 5 МБ на источник) ^[7]
• Internet Explorer допускает 10 МБ на область хранения ^[8]

Локальное и сеансовое хранилище

Веб-хранилище предлагает две разные области хранения — локальное хранилище и хранилище сеансов, которые различаются по объему и сроку службы. Данные, размещаемые в локальном хранилище, относятся к каждому источнику — комбинации протокола, имени хоста и номера порта, как определено в политике одного и того же источника . Данные доступны всем скриптам, загруженным со страниц того же источника, на котором ранее хранились данные, и сохраняются после закрытия браузера. Таким образом, веб-хранилище не страдает от проблем слабой целостности и слабой конфиденциальности файлов cookie, описанных в  разделах 8.5 и 8.6 RFC 6265. Хранилище сеансов предназначено как для каждого источника, так и для каждого экземпляра (для каждого окна или для каждой вкладки) и ограничено временем существования экземпляра. Хранилище сеансов предназначено для того, чтобы отдельные экземпляры одного и того же веб-приложения могли запускаться в разных окнах, не мешая друг другу, — вариант использования, который плохо поддерживается файлами cookie. ^[9]

Интерфейс и модель данных

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

Применение

Браузеры, поддерживающие веб-хранилище, имеют глобальные объекты sessionStorageи localStorageобъявляются на уровне окна. В этих браузерах можно использовать следующий код JavaScript для запуска поведения веб-хранилища:

// Сохраняем значение в браузере на время сеанса sessionStorage . setItem ( 'ключ' , 'значение' ); // Получить значение (удаляется при закрытии и повторном открытии браузера) ... alert ( sessionStorage . getItem ( 'key' ));// Сохраняем значение в браузере после окончания сеанса localStorage . setItem ( 'ключ' , 'значение' ); // Получение значения (сохраняется даже после закрытия и повторного открытия браузера) alert ( localStorage . getItem ( 'key' ));

Через Storage API можно хранить только строки. ^[10] Попытка сохранить другой тип данных приведет к автоматическому преобразованию в строку в большинстве браузеров. Однако преобразование в JSON позволяет эффективно хранить объекты JavaScript.

// Сохраняем объект вместо строки localStorage . setItem ( 'ключ' , { имя : 'значение' }); предупреждение ( typeof localStorage . getItem ( 'ключ' )); // нить    // Сохраняем целое число вместо строки localStorage . setItem ( 'ключ' , 1 ); предупреждение ( typeof localStorage . getItem ( 'ключ' )); // нить   // Сохраняем объект, используя JSON localStorage . setItem ( 'ключ' , JSON . stringify ({ имя : 'значение' })); предупреждение ( JSON . parse ( localStorage . getItem ( 'key' )). name ); // ценить   

Номенклатура

Проект W3C называется «Веб-хранилище». «Хранилище DOM» также было широко используемым названием, хотя его становится все меньше; например, веб-статьи «DOM Storage» на сайтах разработчиков Mozilla и Microsoft были заменены статьями «Web Storage». ^{[11] [12] [13] [14]}

«DOM» в хранилище DOM не относится буквально к объектной модели документа . Согласно W3C, «термин DOM используется для обозначения набора API, доступного для сценариев в веб-приложениях, и не обязательно подразумевает существование реального объекта Document...» ^[15]

Управление веб-хранилищем

Хранение объектов веб-хранилища включено по умолчанию в текущих версиях всех поддерживающих веб-браузеров, при этом поставщики браузеров предоставляют пользователям способы включения или отключения веб-хранилища или очистки «кеша» веб-хранилища. ^[16] Аналогичные элементы управления веб-хранилищем также доступны через сторонние расширения браузера . Каждый браузер хранит объекты веб-хранилища по-разному:

• Firefox сохраняет объекты веб-хранилища в файле SQLitewebappsstore.sqlite , который находится в папке профиля пользователя. ^[17]
• Google Chrome записывает данные веб-хранилища в файл SQLite в профиле пользователя. Подпапка, содержащая этот файл, находится " \AppData\Local\Google\Chrome\User Data\Default\Local Storage" в Windows и " ~/Library/Application Support/Google/Chrome/Default/Local Storage" в macOS .
• Веб-хранилище Opera расположено в « \AppData\Roaming\Opera\Opera\sessions\autosave.win» или « \AppData\Local\Opera\Opera\pstorage\» в зависимости от версии Opera.
• Веб-хранилище Internet Explorer\AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage — " ".
• Веб-хранилище Safari расположено в папке с надписью " LocalStorage" внутри скрытой safariпапки " ". ^[18]

Подобные технологии

Хотя localStorage часто используется для хранения постоянных пар ключ-значение, появились и другие API, позволяющие реализовать различные варианты использования, такие как итеративное индексирование ^[19] , и с различными шаблонами производительности:

• API индексированной базы данных
• База данных веб-SQL
• HTTP-куки
• Частная файловая система Origin (OPFS)

Рекомендации

1. Диксит, Шветанк (5 марта 2013 г.). «Веб-хранилище: более простое и мощное хранилище данных на стороне клиента». Дев.Опера . Проверено 14 мая 2021 г.
2. Хьюм, Энди (24 марта 2011 г.). «localStorage — это не файлы cookie». andyhume.net . Архивировано из оригинала 2 июня 2011 г. Проверено 14 мая 2021 г.
3. Хиксон, Ян, изд. (28 января 2021 г.). «Веб-хранилище (второе издание)». W3C . Рабочая группа по веб-платформе . Проверено 14 мая 2021 г.
4. ЧТОРГ. «Стандарт HTML § 12 Веб-хранилище». html.spec.whatwg.org . Проверено 14 мая 2021 г.
5. Китамура, Эйдзи (28 января 2014 г.). «Работа с квотами в мобильных браузерах: отчет об исследовании хранилища браузера — HTML5 Rocks». Архивировано из оригинала 1 февраля 2014 г. Проверено 4 мая 2021 г.
6. Джон Ресиг: Хранилище DOM. Джон Резиг, ejohn.org . Проверено 12 июня 2011 г.
7. Майклн (08 марта 2013 г.). «Проблема 21680002: увеличение лимита window.localstorage до 10 МБ с 5 МБ. — Проверка кода». Обзоры кода Chromium . Проверено 14 мая 2021 г.
8. Microsoft (20 октября 2016 г.). «Введение в веб-хранилище». Документы Майкрософт . Майкрософт . Проверено 14 мая 2021 г.
9. W3C: Проект стандарта веб-хранилища. Dev.w3.org (5 февраля 2004 г.). Проверено 12 июня 2011 г.
10. W3C, 2011 г. http://dev.w3.org/html5/webstorage/
11. «Хранилище DOM». Сеть разработчиков Mozilla . Архивировано из оригинала 4 июня 2011 года . Проверено 12 июня 2011 г.
12. «API веб-хранилища». Сеть разработчиков Mozilla . Проверено 28 июня 2017 г.
13. «Введение в хранилище DOM». Сеть разработчиков Microsoft . Архивировано из оригинала 8 июня 2011 года . Проверено 12 июня 2011 г.
14. «Введение в веб-хранилище». Сеть разработчиков Microsoft . Проверено 28 июня 2017 г.
15. W3C: Проект стандарта веб-хранилища. Dev.w3.org (5 февраля 2004 г.). Проверено 12 июня 2011 г.
16. Как включить, отключить или очистить кеш «Веб-хранилище» вашего браузера. середина.ас. Проверено 6 октября 2022 г.
17. Webappsstore.sqlite kb.mozillazine.org
18. Где хранятся веб-данные Safari? обсуждения.apple.com. Получено 20 6 октября 2022 г.
19. «localStorage в современных приложениях» . RxDB . Проверено 14 августа 2023 г.

Внешние ссылки

• HTML Living Standard 11 Веб-хранилище
• W3C: веб-хранилище
• API веб-хранилища в сети разработчиков Mozilla
• Opera: Web Storage: более простое и мощное хранилище данных на стороне клиента
• Локальное хранилище в BlackBerry DevZone