Комментарий: В этой статье в основном представлены простые примеры использования LocalStorage, Local Database и SessionStorage в HTML5 Local Storage. Друзья, которые это нужно, могут ссылаться на это.
Очень классная особенность HTML5 - это веб -хранилище, аналогичное предыдущим файлам cookie, но разница в том, что веб -хранилище имеет локальную емкостью 5 мегабайт для хранения, в то время как файлы cookie имеют только 4K, что является преимуществом, которое нельзя сравнить.
Webstrange далее разделен на: LocalStorage, SessionStorage и Local Database.
Далее я представлю его один за другим:
1. LocalStorage
Использование LocalStorage относительно простое, а методы:
localstorage.setitem (ключ, значение); // Сохранить данные
localstorage.getitem (key); // Читать данные
localstorage.removeitem (key); // удалить отдельные данные
localstorage.clear (); // удалить все данные
Ключ: localstorage.key (index); // Получить значение определенного индекса
Небольшая демонстрация, чтобы показать функцию:
(function ($) {
$ (function () {
$ .fn.getformparam = function () {
var serializeObj = {};
var array = this.serializearray ();
var str = this.serialize ();
$ (массив).
if (serializeobj [this.name]) {
if ($. isarray (serializeobj [this.name])) {
serializeobj [this.name] .push (this.value);
}еще{
serializeobj [this.name] = [serializeobj [this.name], this.value];
}
}еще{
serializeobj [this.name] = this.value;
}
});
вернуть serializeobj;
}; </p> <p> var storagefile = json.parse (window.localstorage.getitem ('demo'));
$.
$ ('#demoform'). find ('[name = "'+i+'"]'). val (val);
}).
var data = $ ('#demoForm'). getFormParam ();
window.localstorage.setitem ('demo', json.stringify (data));
вернуть ложь;
});
});
}) (jQuery)
HTML -код:
<! Doctype html>
<html lang = "zh">
<голова>
<meta charset = "utf-8">
<script src = "jquery-1.10.2.min.js"> </script>
<script src = "demo.js"> </script>
<title> документ </title>
</head>
<тело>
<форма>
<p> <backel> <pan> имя </span> <put> </label> </p>
<p> <backel> <pan> возраст </span> <pint> </label> </p>
<p> <backel> <pan> номер студента </span> <put> </label> </p>
<p> <backel> <pan> Адрес </span> <put> </label> </p>
<p> <backel> <pan> Hobbies </span> <Input> </label> </p>
<p> <backel> <pan> Другое </span> <textarea cols = "30" Rows = "10"> </textarea> </label> </p>
<p> <input type = "propect" value = "pospe"> </p>
</form>
</body>
</html>
Таким образом, простая демонстрация, которая показывает LocalStorage, реализовано
2. SessionStorage
Использование SessionStorage такое же, как и у LocalStorage, но SessionStorage будет очищен, когда браузер закрывает веб -сайт, а LocalStorage будет сохранен в браузере, и оба будут использоваться вместе в зависимости от необходимости.
3. Локальная база данных
Студенты, знакомые с разработкой iOS/Android, должны быть более знакомы с базами данных SQLite
Работа базы данных в HTML5 относительно проста, в основном включающая метод OpenDatabase и метод транзакции
Используйте объект DB для получения объектов, созданных OpenDatabase для доступа к базе данных
var db = opendatabase (DatabaseName, версия, описание, размер)
в
Имя базы данных: имя базы данных
Версия: версию базы данных можно игнорировать
Описание: Описание базы данных
Размер: база данных распределял размер пространства
Метод транзакции использует функцию обратного вызова в качестве параметра для выполнения конкретного метода для доступа к базе данных в функции.
db.transaction (function (tx)) {
tx.executesql (sqlquery, [value1, value2 ..], datahandler, errorhandler)
});
Четыре параметра метода executesQL:
SQLQUERY: SQL операторы, которые необходимо выполнить конкретно, создать || Выберите || Обновление || Удалить;
[value1, value2 ..]: массив всех параметров, используемых в операторе SQL. В методе executesQL параметры, которые будут использоваться в операторе SQL, заменяются сначала?
DataHandler: выполнить успешную функцию обратного вызова;
ErryHandler: функция обратного вызова не удалось выполнить;