Веб-хранилище , иногда называемое хранилищем DOM ( хранилище объектной модели документа ), представляет собой стандартный API JavaScript, предоставляемый веб-браузерами . Он позволяет веб-сайтам хранить постоянные данные на устройствах пользователей, аналогичные файлам cookie , но с гораздо большей емкостью [1] и без отправки информации в заголовках HTTP . [2] Существует два основных типа веб-хранилищ: локальное хранилище и хранилище сеансов, которые ведут себя аналогично постоянным и сеансовым файлам cookie соответственно . Веб-хранилище стандартизировано Консорциумом Всемирной паутины (W3C) [3] и WHATWG [4] и поддерживается всеми основными браузерами.
Веб-хранилище отличается от файлов cookie по нескольким ключевым параметрам.
Файлы cookie предназначены для связи с серверами; они автоматически добавляются ко всем запросам и могут быть доступны как со стороны сервера, так и со стороны клиента. Веб-хранилище попадает исключительно под сферу клиентских скриптов . Данные веб-хранилища не передаются автоматически на сервер в каждом HTTP-запросе, и веб-сервер не может напрямую записывать в веб-хранилище. Однако любой из этих эффектов может быть достигнут с помощью явных клиентских скриптов, что позволяет точно настроить желаемое взаимодействие сервера.
Файлы cookie ограничены 4 килобайтами. Веб-хранилище обеспечивает гораздо большую емкость хранения:
Веб-хранилище предлагает две различные области хранения — локальное хранилище и хранилище сеансов, — которые различаются по области действия и времени жизни. Данные, помещенные в локальное хранилище, относятся к источнику — комбинации протокола, имени хоста и номера порта, как определено в политике одного и того же источника . Данные доступны всем скриптам, загруженным со страниц из того же источника, который ранее сохранил данные, и сохраняются после закрытия браузера. Таким образом, веб-хранилище не страдает от проблем слабой целостности и слабой конфиденциальности файлов cookie, описанных в разделах 8.5 и 8.6 RFC 6265. Хранилище сеансов относится как к источнику, так и к экземпляру (окну или вкладке) и ограничено временем жизни экземпляра. Хранилище сеансов предназначено для того, чтобы отдельные экземпляры одного и того же веб-приложения могли работать в разных окнах, не мешая друг другу, — вариант использования, который плохо поддерживается файлами cookie. [9]
Веб-хранилище обеспечивает лучший программный интерфейс, чем файлы cookie, поскольку оно предоставляет модель данных ассоциативного массива , где ключи и значения являются строками .
Браузеры, поддерживающие веб-хранилище, имеют глобальные объекты sessionStorageи localStorageобъявляются на уровне окна. Следующий код JavaScript может использоваться в этих браузерах для запуска поведения веб-хранилища:
// Сохраняем значение в браузере на время сеанса sessionStorage . setItem ( 'key' , 'value' ); // Извлечь значение (удаляется при закрытии и повторном открытии браузера) ... alert ( sessionStorage . getItem ( 'key' ));// Сохраняем значение в браузере после окончания сеанса localStorage . setItem ( 'key' , 'value' ); // Извлечь значение (сохраняется даже после закрытия и повторного открытия браузера) alert ( localStorage . getItem ( 'key' ));Только строки могут быть сохранены через API хранилища. [10] Попытка сохранить другой тип данных приведет к автоматическому преобразованию в строку в большинстве браузеров. Преобразование в JSON , однако, позволяет эффективно хранить объекты JavaScript.
// Сохраняем объект вместо строки localStorage.setItem ( ' key ' , { name : ' value' }); alert ( typeof localStorage.getItem ( 'key' )); // string // Сохраняем целое число вместо строки localStorage.setItem ( ' key' , 1 ); alert ( typeof localStorage.getItem ( 'key' )) ; // string // Сохраните объект с помощью JSON localStorage.setItem('key', JSON.stringify ( { name : ' value ' } ) ) ; alert ( JSON.parse ( localStorage.getItem ( ' key ' ) ) . name ) ; // value Проект W3C называется «Web Storage». «DOM storage» также было общеупотребительным названием, хотя оно становится все менее популярным; например, веб-статьи «DOM Storage» на сайтах разработчиков Mozilla и Microsoft были заменены статьями «Web Storage». [11] [12] [13] [14]
«DOM» в хранилище DOM не относится буквально к Document Object Model . Согласно W3C, «термин DOM используется для обозначения набора API, доступного для скриптов в веб-приложениях, и не обязательно подразумевает существование фактического объекта Document...» [15]
Хранение объектов веб-хранилища включено по умолчанию в текущих версиях всех поддерживаемых веб-браузеров, при этом поставщики браузеров предоставляют пользователям способы изначально включать или отключать веб-хранилище или очищать «кэш» веб-хранилища. [16] Аналогичные элементы управления веб-хранилищем также доступны через сторонние расширения браузера . Каждый браузер сохраняет объекты веб-хранилища по-разному:
webappsstore.sqliteв папке профиля пользователя. [17]\AppData\Local\Google\Chrome\User Data\Default\Local Storage" в Windows и " ~/Library/Application Support/Google/Chrome/Default/Local Storage" в macOS .\AppData\Roaming\Opera\Opera\sessions\autosave.win" или " \AppData\Local\Opera\Opera\pstorage\" в зависимости от версии Opera.\AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage».LocalStorage» внутри скрытой safariпапки « ». [18]Хотя localStorage часто используется для хранения постоянных пар «ключ-значение», появились и другие API, позволяющие использовать различные варианты использования, такие как итеративное индексирование [19] , и с различными шаблонами производительности: