Основной курс HTML5

HTML5 API

HTML5 Медиа

HTML5 Графика

Кэш приложений HTML5 Клиентское хранение в HTML5

Локальная база данных HTML5

HTML5 Web SQL Database (html5 локальная база данных) действительно привлекательна, когда вы обнаруживаете, что можно использовать такие же запросы, как и для mysql, чтобы работать с локальной базой данных, это действительно интересно. Сегодня让我们 вместе изучим API HTML 5 Web SQL Database: openDatabase, transaction, executeSql.

HTML5 Web SQL Database

WebSQL является независимым модулем на переднем конце, это один из способов web хранения, мы часто видим его в отладке, но обычно мы его не используем.

Если вы веб-бэкенд разработчик, вам должно быть легко понять операции SQL.

Web SQL базы данных может работать в последних версиях Safari, Chrome и Opera.

Основные методы

Ниже приведены три основных метода, определенные в стандарте:

openDatabase: этот метод создает объект базы данных с использованием существующей базы данных или новой базы данных.
transaction: этот метод позволяет нам контролировать транзакцию и выполнять.commit или rollback в зависимости от ситуации.
executeSql: этот метод используется для выполнения фактического SQL запроса.

Открытие базы данных

Мы можем использовать метод openDatabase() для открытия существующей базы данных, если база данных не существует, то будет создана новая база данных, как показано в следующем коде:

var db = openDatabase('testdb', '1.0', 'Test WebDB', 2 * 1024 * 1024);

openDatabase() метод имеет пять параметров:

Название базы данных
Версия
Описание текста
Размер базы данных
Создание кэба

Пятый параметр, создание кэба будет вызвано после создания базы данных.

Выполнение запроса

Операции выполняются с помощью функции database.transaction():

Пример

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Основной учебник сайта (oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 2 * 1024 * 1024);
db.transaction(function(tx) {　　
　　　tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});
</script>
</body>
</html>

После выполнения上面的 команды будет создана таблица LOGS в базе данных 'testdb'.

Вставка данных

После выполнения上面的 команды создания таблицы мы можем вставить некоторые данные:

Пример

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Основной учебник сайта (oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 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, \
});
</script>
</body>
</html>

Мы также можем использовать динамические значения для вставки данных:

Пример

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Основной учебник сайта (oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 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]);
});
</script>
</body>
</html>

В примере e_id и e_log являются внешними переменными, executeSql назначает каждому элементу массива параметр "?".

Чтение данных

Ниже приведен пример того, как можно читать данные, уже существующие в базе данных:

Пример

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Основной учебник сайта (oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 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, \
});
　
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);
});
</script>
</body>
</html>

Полный пример

Пример

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Основной учебник сайта (oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 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, \
　　　　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>
<div id="status" name="status">Информационное сообщение</div>
</body>
</html>

Проверьте, посмотрите ›/‹

Результат выполнения примеров показан на рисунке ниже:

Удаление записи

Формат удаления записи выглядит следующим образом:

db.transaction(function(tx) {
　　　　tx.executeSql('DELETE FROM LOGS WHERE id=1');
});

Удаление指定的ых данных id также может быть динамическим:

});

db.transaction(function(tx) {
　　　　tx.executeSql('UPDATE LOGS SET log=\
});

　　　　tx.executeSql('UPDATE LOGS SET log=\
});

Полный пример

Пример

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Основной учебник сайта (oldtoolbag.com)</title>　
</head>
<body>
<script>
var db = openDatabase('testdb', '1.0', 'Test WebDB', 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, \
　　　　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=\
　　　　　　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>
<div id="status" name="status">Информационное сообщение</div>
</body>
</html>

Проверьте, посмотрите ›/‹

Результат выполнения примеров показан на рисунке ниже:

Кэш приложений HTML5 Клиентское хранение в HTML5