Из -за ограничения размера, формата и формата данных хранения эпохи HTML4, если приложение веб -сайта хочет сохранить часть информации в браузере, его можно использовать только для использования cookie. Тем не менее, эти ограничения файлов cookie также приводят к простым данным, таким как cookie, могут хранить только некоторые идентификаторы, такие как идентификаторы.
Ниже приведено ограничение куки:
Большинство браузеров поддерживают печенье с максимальным 4096 байтом.
Браузер также ограничивает количество файлов cookie, хранящихся на пользовательском компьютере. Большинство браузеров позволяют только каждому сайту хранить 20 печеньев;
Некоторые браузеры также внесут абсолютные ограничения на общее количество файлов cookie, которое они примут на всех сайтах, обычно 300.
Ситуация с по умолчанию Cookie будет отправлена на фоновый сервер с помощью HTTP -запроса, но не все запросы требуют файлов cookie, таких как: JS, CS, картинки и другие запросы, не требуют cookie.
Чтобы взломать серию ограничений на файлы cookie, HTML5 может напрямую хранить большое количество данных в браузере клиента через новый API JS и поддерживает сложные локальные базы данных, чтобы сделать JS более эффективным. HTML5 поддерживает два типа веб -строительства:
В H5 хранятся два API, один - это веб -хранилище, а другой - Web SQL. Независимо от того, какой из них основан на языке JavaScript, я научу вас, как использовать веб -хранилище
3. Веб -хранениеHTML5 определяет стандартное веб -хранилище локального хранилища и предоставляет два типа хранилища API: SessionStorage и LocalStorage.
1. LocalStorage был сохранен локально, а хранилище данных является постоянным. После второго, второго или следующего года данные все еще доступны.Особенности: ① Безопасное и постоянное сохранение в домене. То есть все страницы из одного имениного доменного имени в клиенте или браузере могут получить доступ к данным LocalStorage, а данные постоянно сохраняются, за исключением удаления, но данные между клиентом или браузером не зависят друг от друга.
② Данные не будут отправлены на фоновый сервер с помощью HTTP -запроса;
③ Не рассматривайте возможность для данных хранения, потому что браузер обязан поддержать не менее 4 МБ в стандарте HTML5.
Посмотрите на пример:
Код заключается в следующем:
Function clickcounter () {ifof (typeof (storage)! == undefined) {if (localstorage.clickcount) {localstorage.clickcount = number (localstorage.cl ickcount) +1;} else {localstorage.clickcount = 1;} документ. GetElementbyId (результат) .innerhtml = Вы уже нажали кнопку + localstorage.clickcount + times;} else {document.getElementById (результат) .innerHtml = извините, ваш браузер не поддерживает веб -хранилище. ;}} </script> <p> <Кнопка onclick = clickCounter () type = кнопка> нажмите меня! </Button> </p> <div id = result> </div> <p> Нажмите кнопку, чтобы просмотреть увеличение счетчика. </p> <p> Выключите вкладку браузера (или окно), повторно откройте эту страницу, счетчик будет продолжать учитывать (не сбросить). </p> 2.SessionStorage эффективен во время сеанса, и данные автоматически удаляются после закрытия браузера;Особенности: управление сеансом, кратковременное сохранение. Концепция сеанса аналогична концепции сеанса на стороне сервера.
совместимость
Примечание: IE9 LocalStorage не поддерживает локальные файлы.
В настоящее время все основные браузеры в определенной степени поддерживают функции веб -хранилища HTML5. Как видно из рисунка выше, в основном все современные браузеры поддерживают веб -хранилище.
Платформа Android и соответствующие браузеры платформы iOS в основном поддерживают локальные характеристики хранения веб -хранилища. Текущие мобильные устройства на рынке, в дополнение к телефонам Android и iPhone, все больше и больше планшета и в основном зависят от двух платформ. Используя веб -хранилище на мобильном терминале, нам вряд ли нужно рассмотреть вопрос о том, поддерживается ли браузер.
Ниже приведен метод обнаружения:
if (window.localStorage) {// Браузер поддерживает LocalStorage} else {// не поддерживает} if (window.sessionStorage) {// Брейузер поддерживает SessionStorage} else {// не поддерживает} 3. LocalStorageLocalStorage в HTML5 Local Storage API такая же, как SessionStorage. В качестве примера мы принимаем LocalStorage, кратко представляем локальное хранение HTML5 и делаем несколько примеров для общих проблем, таких как обход. LocalStorage - это API, хранящийся локально в HTML5. Различные браузеры имеют различную поддержку API, например, методы использования, максимальное пространство для хранения и т. Д.
Метод хранения: строка хранения в целом. Основные приложения: корзины для покупок, логин клиента, игровой архив. Сущность Сущность Зарезервированные типы данных: массив, картинки, JSON, стиль, сценарий. Сущность Сущность (Пока это может быть сериализовано в строковое содержание, его можно хранить) Адрес хранения: c:/users/15014/appdata/local/google/chrome/пользователь данных/по умолчанию/локально C Drive.LocalStorage предоставляет четыре метода, которые помогут нам выполнить соответствующие операции на локальном хранилище.
(1) LocalStorage.SetItem (имя ключа, значение ключа) хранит данные типа строки на локальном клиенте. То, что это значение состоит в том, что значение этого заключается в том, что значение этого заключается в том, что значение параметра заключается в том, что значение этого. нравиться:
LocalStorage.SetItem (name, Zhang San); Ключевое значение 28 данных.
(2) LocalStorage.getItem (имя ключа) Прочитайте данные, которые были сохранены в локальной области, и прочитайте соответствующие данные имени ключа через имя ключа в качестве параметра. нравиться:
Var Data = LocalStorage.GetItem (имя);
(3) LocalStorage.RemoveItem (имя ключа) Удалить данные, которые были сохранены в локальной области, и удалите соответствующие данные имени ключа через имя ключа в качестве параметра. нравиться:
Var Data2 = LocalStorage.RemoveItem (имя);
(4) localstorage.clear () Удалить все данные, хранящиеся локально. нравиться:
Localstorage.clear () Удалить все данные, хранящиеся локально. Такие как: localstorage.clear ();
(5) Кроме того, четыре функции в SessionStorage в основном такие же, как и использование функции вышеуказанного класса LocalStorage, что не будет объяснено подробно.
Ниже приведен небольшой пример:
<script type = text/javascript> localstorge.setitem (name, Zhang San); Verify (); .GetItem (AGE);3. Стратегия истечения срока годности местного
Поскольку HTML5 не устанавливает стратегию истечения срока действия локального хранения, вы можете написать свою собственную программу стратегии истечения срока действия при обработке стратегии истечения стратегии данных обработки данных, следующим образом:
<! Title> </head> <body> </body> </html> <cript> набор функций (Key, значение) {varcurtime = new Date (). : value, time: curtime})); «Результаты: json.parse (str) Объективное агентство: 23 Имя: Huangxiaojian __proto__: объект Примечание: отдельные кавычки записаны, кроме {}, каждое имя атрибута должно быть двойными кавычками. Json.stringify () используется для разрешения строки из объекта, такого как var a = {a: 1, b: 2} Результат: json.stringify (a) {a: 1, b: 2} */} функция get (key, exp) // exp - время истечения срока действия {var value = localstorage.getitem (key); (Новая дата (новая дата) () .gettime () -dataobj.time> exp) // Если текущее время -minus элемент хранения, установленный во время создания> Срок действия времени {console.log (истекает); Запрос истечь} else {console.Операция, как показано на рисунке ниже:
Приведенное выше содержимое этой статьи.