HTML5 Web SQL Database
Веб-базы данных SQL API не является частью спецификации HTML5, но это отдельная спецификация, представила набор API-интерфейсов для использования базы данных SQL операции клиента.
Если вы задний конец веб-программист, он должен быть легко понять операции SQL.
Вы также можете обратиться в наш SQL учебник , чтобы узнать больше операций с базами данных знаний.
Web SQL Database может работать в последней версии Safari, Chrome и Opera браузер.
Основные методы
Ниже приведены три основные методы, определенные в спецификации:
- OpenDatabase: Этот метод использует существующую базу данных или создать новую базу данных объектов базы данных.
- сделка: Этот метод позволяет нам контролировать сделку, и на основании этого случая фиксации или отката.
- ExecuteSQL: Этот метод используется для выполнения фактического SQL запроса.
Открытие базы данных
Мы можем использовать метод OpenDatabase (), чтобы открыть существующую базу данных, если база данных не существует, создать новую базу данных, используйте следующий код:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
OpenDatabase () метод пяти параметров, соответствующих описанию:
- Имя базы данных
- Номер версии
- Текст описания
- Размер базы данных
- Создание обратного вызова
Пятый параметр, создать функцию обратного вызова будет вызываться после создания базы данных.
Для выполнения операции запроса
Исполнение использует функцию database.transaction ():
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});
Выше оператор создает таблицу с именем зарегистрировавшись в базе данных 'MyDB' после выполнения.
Вставка данных
После выполнения выше заявление, чтобы создать таблицу, мы можем вставить некоторые данные:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "本教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3big.com")');
});
Мы также можем использовать динамическое значение для вставки данных:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS
(id,log) VALUES (?, ?'), [e_id, e_log];
});
Instance e_id e_log и внешние переменные, ExecuteSQL параметр массива отображается на каждой записи в "?".
Считывание данных
В следующем примере показано, как читать данные, которые уже в базе данных:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "本教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3big.com")');
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).log );
}
}, null);
});
Полный пример
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "本教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3big.com")');
msg = '<p>数据表已创建，且插入了两条数据。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
</script>
</head>
<body>
<div id="status" name="status">状态信息</div>
</body>
</html>
Примеры вышеуказанных операционных результатов, как показано ниже:
Удалить запись
Формат удалять записи следующим образом:
db.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
});
Удалить указанный идентификатор данных также могут быть динамическими:
db.transaction(function(tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
});
Обновление записей
обновлять записи, используя следующий формат:
db.transaction(function (tx) {
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
});
Обновления указанным идентификатором данные также могут быть динамическими:
db.transaction(function(tx) {
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
});
Полный пример
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "本教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.w3big.com")');
msg = '<p>数据表已创建，且插入了两条数据。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
msg = '<p>删除 id 为 1 的记录。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
msg = '<p>更新 id 为 2 的记录。</p>';
document.querySelector('#status').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
document.querySelector('#status').innerHTML += msg;
}
}, null);
});
</script>
</head>
<body>
<div id="status" name="status">状态信息</div>
</body>
</html>
Примеры вышеуказанных операционных результатов, как показано ниже:
