В этом посте я расскажу о различных технологиях хранения в браузерах HTML5, чтобы создать веб-приложение, способное работать офлайн с использованием доступных для него стандартных технологий.
sessionStorage#
Это объект, который хранит информацию в текущей вкладке текущего домена. Но он сохраняется при обновлении страницы или восстановлении вкладки. Новое окно вкладки создаст новое SessionStorage.
// Almacena la información en sessionStorage
sessionStorage.setItem('key', 'value');
// Obtiene la informacion almacenada desde sessionStorage
var data = sessionStorage.getItem('key');localStorage#
Обеспечивает доступ к долгосрочному хранилищу для каждого домена.
// Almacena la información en localStorage
localStorage.setItem('key', 'value');
// Obtiene la informacion almacenada desde localStorage
var data = localStorage.getItem('key');Кэш приложений (AppCache)#
Это механизм кэширования веб-приложений, позволяющий работать с ними офлайн. С помощью файла манифеста мы можем указать, какие ресурсы будут доступны офлайн. Это также снижает нагрузку на сервер и ускоряет просмотр.
Ссылки#
https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache https://html.spec.whatwg.org/multipage/browsers.html#appcache
Индексированная база данных#
IndexedDB — это API для клиентского хранения значительного объема структурированных данных. Больше, чем sessionStorage, LocalStorage или globalStorage
Заключение#
Это подходящая технология для огромных объёмов данных
Узнать больше#
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
API файлов#
Он позволяет работать со структурой файла, сохранять их и читать на самом диске. Это может быть полезно в таких случаях, как если мы хотим смоделировать загрузку файла в приложении офлайн, мы можем сохранить его на диск и синхронизировать позже, но для загрузки страницы, как мы знаем, запись на диск требует высокой стоимости, чего нужно избегать.
В обоих версиях IE и Chrome требуется разрешение пользователя. Ограничение на свободное место на диске.
Дополнительная информация и примеры#
http://www.html5rocks.com/es/tutorials/file/filesystem/
ДОСТУПНОЕ ХРАНИЛИЩЕ#
BrowserssessionStoragelocalStorageFileAPIApplication Cache (AppCache)Индексированный DbInternet Explorer 114864 k4864 kНе ограничено500MB/ Unlimited (Запрос пользователя)250 MB(настраиваемо до 1GB на пользователя)Google Chrome 445101 k5101 kНе ограниченоНеограничено *1300 Mb (как минимум)Microsoft Edge 1.04864 k4864 kНе ограничено500MB/ Unlimited (Спрашивает пользователя)250 MB(настраивается до 1GB пользователем)Firefox 405120 k5120 kНе ограничено250MB ‘3No limit (разрешение пользователя) blobs >50Mb) Единицы — это количество символов (байт), Test используемых локально, и sessionStorage: http://dev-test.nemikor.com/web-storage/support-test/
Совместимость браузера#
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)localStorage43.5810.504sessionStorage52810.504Application cache4.03.510.010.64.0IndexedDb2310IE10157.1FileApi313110257.1
- http://caniuse.com/#feat=fileapi
- http://caniuse.com/#feat=localStorage
- http://caniuse.com/#feat=sessionStorage
- http://caniuse.com/#feat=appcache
- http://caniuse.com/#feat=IndexedDb
В данном случае мы сосредоточились на десктопных браузерах, но на приведённых выше сайтах можно получить информацию о мобильных браузерах
Примеры#
Здесь мы можем увидеть некоторые примеры этих технологий вместе
Узнать больше#
Нет стандартов / депрекада (не рекомендуется)#
globalStorage#
Это глобальный объект, который поддерживает несколько частных зон хранения, которые могут использоваться для хранения данных в течение длительного времени.
webSQL#
Это похожая технология на IndexedDB, но она была выведена из эксплуатации 18 ноября 2010 годаhttp://www.w3.org/TR/webdatabase/
userDataBehavior#
Он позволял очень ограниченное хранение, совместим только с IE и устарел с IE10
До следующей встречи!
