Владимир Фищенко

Web SQL Database

Web SQL Database – это новая технология, являющаяся частью HTML5. Суть заключается в том, что браузер, поддерживающий HTML5 должен содержать локальную базу данных, работа с которой происходит используя javascript. Манипуляции с данными происходят используя SQL синтаксис. На данный момент рекомендовано, чтобы браузер содержал Sqlite 3.6.19.

Зачем может понадобится web sql database? Вероятней всего для двух типов задач: создания оффлайн приложения и ускорения работы с большими объёмами информации при медленном и нестабильном соединении. Сейчас данную технологию поддерживает только три браузера: Google Chrome, Safari и Opera.

Для использования базы данных необходимо удостовериться в поддержке технологии браузером и создать соединение.

if(! window.openDatabase) alert("Your browser does not appear to support the openDatabase call from the HTML5\nPlease try google chrome or safari.");
//подключение к базе данных offline, без указания версии, с видимым названием Fights и размером 1048576 байт
var db = openDatabase("offline", "", "Fights", 1048576);

Максимальный рекомендуемый для браузеров размер базы данных 5Мб. При запросе большей базы данных, браузер должен выдавать сообщение пользователю с предупреждением об опасности и просьбой подтвердить большой размер базы данных.

Далее, если базы данных не существует, необходимо её создать. Создадим таблицу fights (поединки) с идентификатором, первым спортсменом, вторым спортсменом и результатом.

  db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS fights(id INTEGER PRIMARY KEY AUTOINCREMENT, first VARCHAR(127),second VARCHAR(127),result VARCHAR(127))',
      []);
  });

Теперь можем приступить к работе. Все запросы, которые должны быть выполнены вместе, должны быть объединены в одну транзакцию, например можно объединить создание таблицы, если она не существует и выборку данных из неё

  db.transaction(function(tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS fights(id INTEGER PRIMARY KEY AUTOINCREMENT, first VARCHAR(127),second VARCHAR(127),result VARCHAR(127))',
      []);
    tx.executeSql('SELECT * FROM fights', [], function(tx, rs) {
      for(var i = 0; i < rs.rows.length; i++) {
        renderNote(rs.rows.item(i).id,rs.rows.item(i).first,rs.rows.item(i).second,rs.rows.item(i).result);
      }
    });
  });

Как вы видите, при выборке, мы получаем объект rs, содержащий все полученные данные в коллекции rows. Получить строку можно методом item(i), где i - номер строки. Поля id, result и т.д. соответствуют колонкам в таблице.

Помимо выборки, мы можем и добавить строку, при этом в объекте rs будет содержаться идентификатор добавленной записи rs.insertId .

function insertRow(first, second, result) {
  db.transaction(function(tx) {
    tx.executeSql("INSERT INTO fights (first,second,result) VALUES(?, ?, ?)", [first,second,result],
      function(tx, rs) {
      }
  });
}

Изменить строку

function updateRow(first, second, result) {
  db.transaction(function(tx) {
    tx.executeSql("UPDATE fights  SET `first` = ?,`second` = ?,`result` = ? WHERE `id` = ?", [first,second,result,current_id],
      function(tx, rs) {
      },
      function(tx, error) {
      });
  });
}

Удалить строку

function deleteRow() {
  db.transaction(function(tx) {
    tx.executeSql("DELETE FROM fights WHERE `id` = ?", [current_id],
      function(tx, rs) {
      },
      function(tx, error) {
      });
  });
}

Напоследок добавлю, что помимо Web SQL Database для хранения данных в HTML5 добавлен Web Storage.