Перед H5 хранилище в основном использовалось с файлами cookie. Недостатки файлов cookie находятся с данными на головке запроса, а размер находится в пределах 4K. Лорд -домен загрязнение.
Основные приложения: корзина для покупок, вход в систему клиента
Для браузера IE есть пользовательские DDATA, размер 64K, поддерживается только браузером IE.
ЦельХранение в целом, постоянное хранилище, никогда не потерпите неудачу, если только оно не удалено вручную.
размер:Каждое доменное имя 5m
Ситуация поддержки:Примечание: IE9 LocalStorage не поддерживает локальные файлы.
Метод обнаружения: if (if (window.localstorage) {alert ('Этот браузер поддерживает LocalStorage');} else {alert ('Этот браузер не поддерживает LocalStorage');} Общий API:getItem // возьмите записи
SetItiten // Запись настроек
Удалить intem // Удалить запись
Ключ // Возьмите значение, соответствующее ключу
Clear // Clear Records
Содержание хранения:Массив, картинки, JSON, стиль, сценарий. Сущность Сущность (Пока это может быть сериализовано в строковое содержание, его можно хранить)
2. локальное хранение сессииLocalStorage в HTML5 Local Storage API такая же, как SessionStorage.
3. автономный кеш (кеш приложения)Файл, необходимый для локальных приложений кэша
Как использовать:① Настройка манифестного файла
Страница:
<!Манифестный файл:
Manifest File - это простой текстовый файл, который сообщает браузеру, что содержимое кеша (и контент, который не кеш).
Манифестные файлы можно разделить на три части:
① Cache Manifest -Файл, указанный в этом заголовке, будет кэш после первой загрузки
②network -Файлы, перечисленные под этим заголовком, должны быть подключены к серверу без кэширования
③ Запасная сторона -файлы, перечисленные в этом заголовке
Полная демонстрация:Манифест кэша# 2016-07-24 v1.0.0/theme.css/main.jsnetwork: login.jsp wanlback: /html//offline.htmlНа сервере: Manifest File должен настроить правильный тип MIME, то есть текстовый/манифест.
Такой как Tomcat:
<MIME-MAPPING> <Stension> Manifest </extension> <Mime-type> Text/Cache-Manifest </mime-type> </mime-mapping >>Общий API:
Ядро является объектом ApplicationCache.
0 (Uncached): нет кэша, то есть кеш приложений, не связанный со страницей
1 (IDLE): IDLE, то есть кэш приложения не обновляется
2 (Проверка): Во время проверки он загружает файл описания и проверяет обновление
3 (Скачать): В загрузке кэш приложений загружается ресурс, указанный в файле описания
4 (UpdateAdy): Обновлено, все ресурсы были загружены
5 (idle): заброшен, то есть файл описания кэша приложения больше не существует, поэтому страница не может получить доступ к кэше приложения
Связанные события:Указывает изменения в применении применения состояния кэша:
Проверка: запускается, когда браузер ищет кэш приложения
Ошибка: триггер при отправке ошибки во время проверки или загрузки ресурсов
Noupdate: запускается при проверке файла описания, и обнаружил, что файл не изменен
Скачать: запускается при загрузке приложения ресурсов кэша
Прогресс: непрерывно запускается в процессе загрузки файла кэш приложений
UpdateEardy: новый кэш приложений загрузите на триггерах страницы
кэширован: триггеры, когда кеш приложения будет завершен
Три преимущества кеша приложения:① Офлайн просмотр
② Увеличьте скорость дохода лица на странице
③ Снижение давления сервера
Примечание:
1. Предел емкости браузера на данных кэша может не совпадать (ограничения, установленные некоторыми браузерами, составляют 5 МБ на сайт)
2. Если файл манифеста или файл, указанный внутри внутри, не может быть загружен нормально, весь процесс обновления будет рассматриваться как сбой, и браузер будет продолжать использовать старый
3. Цитата HTML манифеста должен быть таким же, как и файл манифеста, под тем же доменом
4. Браузер автоматически будет кэшировать HTML -файл файла манифеста, который приводит к обновлению обновления версии обновления, если изменяется контент HTML.
5. Кэш в манифестном файле не имеет ничего общего с сетью и запасной.
6. Ресурсы в резерве должны быть такими же, как и файл Manifest
7. После обновления версии она должна быть обновлена один раз, чтобы запустить новую версию (ситуация на странице будет чиститься один раз), и необходимо добавить версию события мониторинга.
8. Даже если другие страницы на сайте не настроены, доступ к ресурсу запроса можно получить из кэша в кэше
9. При изменении манифестного файла сам запрос ресурса также запустит обновление
Разница между автономным кешем и традиционным кешем браузера:1. Офлайн -кэш для всего приложения, кэш браузера - это единый файл
2. Вы можете открыть страницу, если у вас есть отключение кэша в автономном режиме.
3. Офлайн -кэш может активно уведомлять браузер об обновлении ресурсов
4. Web SqlРеляционная база данных, доступ через оператор SQL
API API базы данных Web SQL не является частью спецификации HTML5, но это независимая спецификация, внедряя набор API, которые используют SQL для работы с базами данных клиента.
Ситуация поддержки:База данных Web SQL может работать в последней версии Safari, Chrome и Opera Browser.
Основной метод: ①pendatabase: В этом методе используются существующие базы данных или новые базы данных для создания объекта базы данных. ② Transaction: Этот метод позволяет нам управлять транзакцией и выполнять подчинение или откат на основе этой ситуации. ③ выполняет executesql: этот метод используется для выполнения реальных запросов SQL. Откройте базу данных: var db = opendatabase ('mydb', '1.0', 'test db', 2 * 1024 * 1024, fn); // opendatabase () 方法对应的五个参数分别为 ： 数据库名称、版本号、描述文本、 Размер базы данных, обратный вызов создания Выполнить операцию запроса: Var db = opendatabase ('mydb', '1.0', 'test db', 2 * 1024 * 1024); Вставить данные: Var db = opendatabase ('mydb', '1.0', 'test db', 2 * 1024 * 1024); 1, Winty) '); Читать данные: Db.transaction (function (tx) {tx.executesql ('select * from win', [], function (tx, результаты) {var len = results.rows.length, msg = <p> Запись номер: +len +</p>; }}, нулевой);});Из этих операций можно увидеть, что в основном используется операторы SQL для выполнения операций, связанных с базой данных.
5. indexeddbAPI Index Database (IndexedB) (как часть HTML5) полезна для создания автономного веб -приложения HTML5 с богатыми данными хранения данных. В то же время это также помогает локальным данным кэша, так что традиционные онлайн -веб -приложения (такие как мобильные веб -приложения) могли работать и реагировать быстрее.
Асинхронное API:Большинство операций в IndexedDB не являются нашими часто используемыми методами вызова, возвращая результаты результата, а режим ответа на запрос, такой как открытие операции базы данных
Таким образом, когда мы открыли базу данных, мы фактически вернули объект DB, и этот объект был в результате. Как видно из приведенного выше рисунка, за исключением результата. Несколько важных атрибутов являются Onerror, Onsuccess, OnupGradeneeded (когда мы запрашиваем номер версии базы данных, и существующий номер версии базы данных является непоследовательным). Это похоже на наш запрос Ajax. После того, как мы инициировали этот запрос, мы не смогли определить, когда он был успешным, поэтому нам нужно обработать некоторую логику в обратном вызове.
Выключить и удалить: Функция закрыто (db) {db.close ();} функция deletedb (name) {indexeddb.deletedatabase (name);} Хранение данных:В IndexedDB нет концепции, но Object Store. Другими словами, объектно -магазин эквивалентна таблице, которая связана с каждой частью данных, хранящиеся в нем.
Мы можем использовать указанное поле в каждой записи в качестве значений ключей (клавиатура) или использовать автоматическое генерирующее число в качестве значений ключей (KeygenRator) или не указано. Различные типы выбора ключей, структура данных, которую может хранить объект -магазин, также может храниться.
Приведенное выше содержимое этой статьи.