Учебники

HTML5 — База данных Web SQL

Август 22, 2018

API базы данных Web SQL на самом деле не является частью спецификации HTML5, но представляет собой отдельную спецификацию, которая представляет набор API для управления базами данных на стороне клиента с помощью SQL.

Я предполагаю, что вы отличный веб-разработчик, и если это так, то, без сомнения, вы бы хорошо знали концепции SQL и RDBMS. Если вы все еще хотите провести сеанс с SQL, тогда вы можете пройти наш учебник по SQL .

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

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

В спецификации определены следующие три основных метода, которые я собираюсь рассмотреть в этом уроке:

  • openDatabase — этот метод создает объект базы данных либо используя существующую базу данных, либо создавая новую.

  • транзакция — этот метод дает нам возможность контролировать транзакцию и выполнять фиксацию или откат в зависимости от ситуации.

  • executeSql — этот метод используется для выполнения фактического запроса SQL.

openDatabase — этот метод создает объект базы данных либо используя существующую базу данных, либо создавая новую.

транзакция — этот метод дает нам возможность контролировать транзакцию и выполнять фиксацию или откат в зависимости от ситуации.

executeSql — этот метод используется для выполнения фактического запроса SQL.

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

Метод openDatabase заботится об открытии базы данных, если она уже существует, этот метод создаст ее, если она уже не существует.

Чтобы создать и открыть базу данных, используйте следующий код — 

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

Вышеуказанный метод принял следующие пять параметров —

  • Имя базы данных
  • Номер версии
  • Текстовое описание
  • Размер базы данных
  • Создание обратного вызова

Последний и пятый аргумент, callback создания будет вызван, если база данных создается. Однако без этой функции базы данных по-прежнему создаются на лету и корректно корректируются.

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

Для выполнения запроса вы используете функцию 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)'); 
});

Приведенный выше запрос создаст таблицу с именем LOGS в базе данных «mydb».

ВСТАВИТЬ Операция

Для создания записей в таблицу мы добавим простой SQL-запрос в приведенном выше примере следующим образом: 

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, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});

Мы можем передавать динамические значения при создании ввода следующим образом: 

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]; 
});

Здесь 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, "foobar")'); 
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
});  

db.transaction(function (tx) { 
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { 
      var len = results.rows.length, i; 
      msg = "<p>Found rows: " + len + "</p>"; 
      document.querySelector('#status').innerHTML +=  msg; 
  
      for (i = 0; i < len; i++) { 
         alert(results.rows.item(i).log ); 
      } 
  
   }, null); 
});

Последний пример

Итак, наконец, давайте сохраним этот пример в полноценном документе HTML5 следующим образом и попробуем запустить его с браузером Safari.

Live Demo 

<!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, "foobar")'); 
            tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")'); 
            msg = '<p>Log message created and row inserted.</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>Found rows: " + 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">Status Message</div> 
   </body> 
</html>

Это даст следующий результат —

175
Share: