В предыдущей статье «HTML5 Local Storage: Web Storage» он кратко представляет, как использовать LocalStorage для реализации локального хранилища; Фактически, в дополнение к SessionStorage и LocalStorage, HTML5 также поддерживает локальное хранилище данных через локальные базы данных. HTML5 использует базу данных типа файла, такую как SQLLITE, которая в основном сосредоточена на встроенных устройствах. Студенты, знакомые с разработкой iOS/Android, должны быть знакомы с базами данных SQLLITE.
Операция базы данных в HTML5 относительно проста, с двумя основными функциями:
1. Создайте объект для доступа к базе данных с помощью метода OpenDatabasevar db = opendatabase (DatabaseName, версия, описание, размер)
Этот метод имеет четыре параметра, а его функции:
Имя базы данных: имя базы данных;
Версия: номер версии базы данных, без заполнения;
Описание: Описание базы данных;
Размер: размер пространства, выделенного для базы данных;
2. Используйте объект доступа к базе данных (например, DB), созданный на первом шаге для выполнения метода транзакции для выполнения обработки транзакцийdb.transaction (function (tx)) {
// Выполните оператор для доступа к базе данных
});
Метод транзакции использует функцию обратного вызова в качестве параметра, в которой выполняется конкретная операция доступа к базе данных;
3. Выполнить запрос с помощью метода executesQLtx.executesql (sqlquery, [value1, value2 ..], datahandler, errorhandler)
Метод executesQL имеет четыре параметра, а его функции следующие:
SQLQUERY: операторы SQL, которые необходимо выполнить конкретно, могут быть созданы, выбирать, обновлять и удалять;
[value1, value2 ..]: массив всех параметров, используемых в операторе SQL. В методе executesQL параметры, которые будут использоваться в операторе SQL, заменены? сначала, а затем эти параметры состоит из массива по очереди и помещается во второй параметр;
DataHandler: функция обратного вызова, которая успешно называется, с помощью которой можно получить набор результатов запроса;
ErryHandler: функция обратного вызова, вызванная при выполнении выполнения;
В этой статье используется поддержка базы данных HTML5 для повторного внедрения управления адресными книгами в предыдущей статье. Функции, которые должны быть реализованы, следующие:
Контакты могут быть созданы и сохранены в базе данных. Контактные поля включают: имя, номер мобильного телефона, компания, время создания;
Список всех в настоящее время сохраненной контактной информации;
Вы можете удалить конкретную контактную информацию;
Точно так же сначала приготовьте HTML -страницу следующим образом :<! Doctype html>
<html>
<голова>
<meta charset = "utf-8"/>
<title> HTML5 локальная база данных локальной хранения </title>
<style>
.AdDDIV {
Граница: 2px пунктир #CCC;
Ширина: 400px;
Текст-альбом: Центр;
}
</style>
</head>
<body onload = "loktall ()">
<div>
<метка для = "user_name"> name: </label>
<input type = "text" id = "user_name" name = "user_name"/>
<br/>
<Метка для = "Mobilephone"> Мобильный телефон: </label>
<input type = "text" id = "mobilephone" name = "mobilephone"/>
<br/>
<метка для = "Mobilephone"> Компания: </label>
<input type = "text" id = "company" name = "company"/>
<br/>
<input type = "button" onclick = "save ()" value = "добавить запись"/>
</div>
<br/>
<div id = "list">
</div>
</body>
</html>
Интерфейс отображается следующим образом:
Чтобы реализовать функцию создания нового контакта и хранения его в базе данных, требуется следующий простой код JS:
// Откройте базу данных
var db = opendatabase ('contactdb', '', 'Local Database Demo', 204800);
// Сохранить данные
function save () {
var user_name = document.getElementbyid ("user_name"). Value;
var mobilephone = document.getElementbyId ("mobilephone"). value;
var company = document.getElementbyId ("Компания"). Значение;
// Время создания
var time = new Date (). getTime ();
db.transaction (function (tx) {
tx.executesql ('вставьте в контактные значения (?,?,?,?)', [user_name, mobilephone, компания, время], Onsuccess, Onerror);
});
}
// функция обратного вызова, выполненная после успешного выполнения оператора SQL
функция onsuccess (tx, rs) {
оповещение («Операция успешно»);
LokeAll ();
}
// Функция обратного вызова, выполненная после выполнения оператора SQL
Функция Onerror (TX, ERROUS) {
ALERT («Операция не удалось, неудачное сообщение:»+ error.message);
}
Чтобы отобразить все в настоящее время сохраненные списки контактов, вы можете использовать следующий код JS:
// Получение всех контактов, хранящихся в базе данных SQLLITE
function loktall () {
var list = document.getElementbyId ("list");
db.transaction (function (tx) {
// Если таблица данных не существует, создайте таблицу данных
tx.executesql ('Создать таблицу, если не существует контакта (имя текст, текст телефона, текст компании, CreateTime Integer)', []);
// Проверьте все записи контактов
tx.executesql ('select * from contact', [], function (tx, rs) {
if (rs.row.length> 0) {
var result = "<Таблица>";
result += "<tr> <th> серийный номер </th> <Th> name </th> <Th> Mobile </th> <Th> Компания </th> <T.> Добавить время </th> <Th> операция </th> </tr>";
for (var i = 0; i <rs.row.length; i ++) {
var row = rs.rows.item (i);
// конвертировать время и выход формата
var time = new Date ();
time.settime (row.createtime);
var TimeStR = Time.Format ("yyyy-mm-dd HH: MM: SS");
// Соберите узел строки таблицы
Результат+= "<tr> <td>"+(i+1)+"</td> <td>"+row.name+"</td> <td>"+row.phone+"</td> <td>"+row.company+"</td> <td>"+timest+"</td> <td> <type = 'value =' value = 'delate =' delate = 'delate =' delate = 'delate =' delate = 'delate =' delate = 'delate =' delate = 'delate =' delate = 'delate =' delate = 'delate =' delate = 'delate =' delte '. onclick = 'del ("+row.phone+")'/> </td> </tr> ";
}
list.innerhtml = result;
}еще{
list.innerhtml = "Данные в настоящее время пусты, поторопитесь и начните добавлять контакты";
}
});
});
}
Среди них функция формата, включающая время формата, может быть названа следующей реализацией JS :Date.prototype.format = function (формат)
{
var o = {
"M+": this.getMonth ()+1, // месяц
"D+": this.getDate (), // день
"H+": this.gethours (), // час
"M+": this.getMinutes (), // минута
"S+": this.getSeconds (), // секунд
"q+": math.floor ((this.getmonth ()+3)/3), // квартал
"S": this.getMilliseconds () // миллисекунд
}
if (/(y+)/. test (format)) format = format.replace (regexp. $ 1,
(this.getFyeAr ()+""). substr (4 - regexp. $ 1.length));
для (var k in o) if (new regexp ("(" + k + ")"). test (format))
format = format.replace (regexp. $ 1,
Regexp. $ 1.length == 1? хорошо] :
("00"+ o [k]). Substr ((""+ o [k]). Length));
возврат формат;
}
Наконец, эффект реализации интерфейса выглядит следующим образом:
Чтобы реализовать конкретный контакт, вам необходимо выполнить следующий код JS :// удалить контактную информацию
функция del (телефон) {
db.transaction (function (tx) {
// Обратите внимание, что параметр, передаваемый в телефоне, должен отображаться здесь, преобразуется в тип строки
tx.executesql ('удалить из контакта, где телефон =?
});
}
Как и в стиле таблицы на скриншоте выше, вы можете обратиться к следующему коду CSS :th {
Шрифт: жирный жирник 11px "Trebuchet MS", Verdana, Arial, Helvetica, Sans-Serif;
Цвет: #4F6B72;
граница правая: 1PX SOLID #C1DAD7;
Пограничный подъем: 1PX SOLID #C1DAD7;
Пограничная топ: 1PX SOLID #C1DAD7;
СКАЖИ САМЕТ: 2PX;
Текст-трансформация: верхний регистр;
Текст-альбом: слева;
Подкладка: 6px 6px 6px 12px;
}
td {
Право границы: 1PX SOLID #C9DAD7;
Пограничный подъем: 1PX SOLID #C9DAD7;
Фон: #ffff;
Подкладка: 6px 6px 6px 12px;
Цвет: #4F6B72;
}