HTML5 - база данных Web SQL

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!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>

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