HTML5 Web SQL Database
Статус Web SQL:API Web SQL устарел и больше не рекомендуется. Новые браузерные стандарты отдают предпочтение IndexedDB для клиентского хранилища. Web SQL по-прежнему поддерживается только в некоторых старых браузерах.
Альтернатива:
Поскольку будущее Web SQL неопределённо и он больше не имеет широкой поддержки, рекомендуется перейти на IndexedDB — современный браузерный API, поддерживающий транзакции и хранение пар ключ-значение.
API Web SQL Database не является частью спецификации HTML5, а представляет собой независимую спецификацию, которая вводит набор API для использования SQL для работы с клиентскими базами данных.
Если вы программист веб-бэкенда, вам будет легко понять операции SQL.
Вы также можете обратиться к нашемуучебнику по SQL, чтобы узнать больше об операциях с базами данных.
Web SQL Database работает в последних версиях браузеров Safari, Chrome и Opera.
Основные методы
Ниже приведены три основных метода, определённых в спецификации:
- openDatabase: Этот метод создаёт объект базы данных, используя существующую базу данных или только что созданную базу данных.
- transaction: Этот метод позволяет нам управлять транзакцией и выполнять commit или rollback в зависимости от ситуации.
- executeSql: Этот метод используется для выполнения фактических SQL-запросов.
Открытие базы данных
Мы можем использовать метод openDatabase() для открытия существующей базы данных. Если база данных не существует, будет создана новая база данных. Код использования выглядит следующим образом:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
Пять параметров метода openDatabase() описываются следующим образом:
- Имя базы данных
- Номер версии
- Текст описания
- Размер базы данных
- Функция обратного вызова при создании
Пятый параметр, функция обратного вызова при создании, будет вызвана после создания базы данных.
Выполнение операций запроса
Используйте функцию database.transaction() для выполнения операций:
var db = openDatabase('mydb', '1.0', 'Тестовая БД', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});
После выполнения приведённой выше инструкции в базе данных 'mydb' будет создана таблица с именем LOGS.
Вставка данных
После выполнения приведённой выше инструкции создания таблицы мы можем вставить некоторые данные:
var db = openDatabase('mydb', '1.0', 'Тестовая БД', 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, "Example Tutorial")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.example.com")');
});
Мы также можем использовать динамические значения для вставки данных:
var db = openDatabase('mydb', '1.0', 'Тестовая БД', 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]);
});
В примере e_id и e_log — внешние переменные. executeSql сопоставляет каждый элемент в параметре массива с "?".
Чтение данных
В следующем примере показано, как читать данные, которые уже существуют в базе данных:
var db = openDatabase('mydb', '1.0', 'Тестовая БД', 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, "Example Tutorial")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.example.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);
});
Полный пример
Пример
var db = openDatabase('mydb', '1.0', 'Тестовая БД', 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, "Example Tutorial")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.example.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);
});
Попробуйте сами »
Результат выполнения приведенного выше примера показан на следующем рисунке:
Удаление записей
Формат удаления записей выглядит следующим образом:
db.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
});
id указанных данных для удаления также может быть динамическим:
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');
});
id указанных данных для обновления также может быть динамическим:
db.transaction(function(tx) {
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=?', [id]);
});
Полный пример
Пример
var db = openDatabase('mydb', '1.0', 'Тестовая БД', 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, "Example Tutorial")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.example.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);
});
Попробуйте сами »
Результат выполнения приведенного выше примера показан на следующем рисунке:
Другие расширения