HTML5 WebSQL

開発 babukumababukuma

HTML5の標準仕様から外されていつなくなるかわからないが、まだ、色んなブラウザでサポートしているのでまとめてみる。

ここではSafari向けのWebSQL。

参照: W3C Web SQL Database, Safari Developer Library

Creating and Opening a Database

var db = openDatabase(dbName, version, displayName, maxSize);
  • dbName: db名（例: 'babukumaDb'）
  • version: dbのバージョン（例: '1'）
  • displayName: 表示名（例: 'Babukuma's Database'）
  • maxSize: 最大格納サイズ（単位bytes）（例: 65536）
var dbName = 'babukumaDB';
var displayName = "babukuma's database";
var maxSize = 1024 * 1024 * 4;
var version = '1';
var db;
try {
  db = openDatabase(dbName, version, displayName, maxSize);
} catch(e) {
  if (e === 2) {
    alert("Invalid database version.");
  } else {
    alert("Unknown error " + e);
  }
}

Executing a Query

executeSql(sqlStatement, arguments, callback, errorCallback);
  • sqlStatement: SQL
  • arguments: 引数
  • callback: 成功時のコールバック
  • errorCallback: エラー時のコールバック
// 成功時コールバック
function nullDataHandler(transaction, results) {}
// エラー時コールバック
function errorHandler(transaction, error) {
  alert('Error was ' + error.message + ' (Code ' + error.code + ')');
}
db.transaction(function(transaction) {
  transaction.executeSql('CREATE TABLE T_TEST ID INT PRIMARY KEY, NAME TEXT', [], nullDataHandler, errorHandler);
  transaction.executeSql('INSERT INTO T_TEST VALUES (?, ?)', [1, 'BABUKUMA'], nullDataHandler, errorHandler);
});

Handling Result Data

// クエリ実行成功時コールバック
function dataHandler(transaction, results) {
  var size = results.length;
  for(var i = 0 ; i < size ; i++) {
    row = results.rows.item(i);
    console.log("ID=%d, NAME=%s", row.ID, row.NAME);
  }
}
// エラー時コールバック
function errorHandler(transaction, error) {
  alert('Error was ' + error.message + ' (Code ' + error.code + ')');
}
db.transaction(function(transaction) {
  transaction.executeSql('SELECT * FROM T_TEST WHERE ID > ?', [1], dataHandler, errorHandler);
});

Migration

  • oldVersion: 以前のバージョン
  • newVersion: 新バージョン
  • migrationHandler: マイグレーション用関数
  • errorHandler: エラー時コールバック
  • successHandler: 成功時コールバック
var dbName = 'babukumaDB';
var displayName = "babukuma's database";
var maxSize = 1024 * 1024 * 4;
var DB_VERSION = '4';
var db;
// 成功時コールバック
var successHandler = function() {
  alert('マイグレーション成功!');
};
// エラー時コールバック
function errorHandler(transaction, error) {
  alert('Error was ' + error.message + ' (Code ' + error.code + ')');
}
// 初期化
var initDB = function(transaction) {
  transaction.executeSql('CREATE TABLE ……', [], nullDataHandler, errorHandler);
};
// Version 1 -> Version 2
var migration_1_2 = function(transaction) {
  transaction.executeSql('ALTER TABLE ……', [], nullDataHandler, errorHandler);
};
// Version 2 -> Version 3
var migration_2_3 = function(transaction) {
  transaction.executeSql('ALTER TABLE ……', [], nullDataHandler, errorHandler);
};
// Version 3 -> Version 4
var migration_3_4 = function(transaction) {
  transaction.executeSql('ALTER TABLE ……', [], nullDataHandler, errorHandler);
};
try {
  db = openDatabase(dbName, '', displayName, maxSize); // versionを指定しないのが重要
  if (db.version !== DB_VERSION) {
    if (db.version === ") {
      db.changeVersion(", '1', initDB, errorHandler, function() {
        db.changeVersion('1', '2', migration_1_2, errorHandler, function() {
          db.changeVersion('2', '3', migration_2_3, errorHandler, function() {
            db.changeVersion('3', '4', migration_3_4, errorHandler, successHandler);
          });
        });
      });
    } else if (db.version === '1') {
      db.changeVersion('1', '2', migration_1_2, errorHandler, function() {
        db.changeVersion('2', '3', migration_2_3, errorHandler, function() {
          db.changeVersion('3', '4', migration_3_4, errorHandler, successHandler);
        });
      });
    } else if (db.version === '2') {
      db.changeVersion('2', '3', migration_2_3, errorHandler, function() {
        db.changeVersion('3', '4', migration_3_4, errorHandler, successHandler);
      });
    } else if (db.version === '3') {
      db.changeVersion('3', '4', migration_3_4, errorHandler, successHandler);
    }
  }
} catch(e) {
  if (e === 2) {
    alert("Invalid database version.");
  } else {
    alert("Unknown error " + e);
  }
}
Tags: