ZEALOTエンジニアブログ

HTML5 WebSQL

Pocket

1. WebSQL

HTML5の標準仕様から外されていつなくなるかわからないが、

まだ、色んなブラウザでサポートしているのでまとめてみる。
ここではSafari向けのWebSQL。

Creating and Opening a Database

var db = openDatabase(dbName, version, displayName, maxSize);
  1. dbName : db名(例:’babukumaDb’)
  2. version : dbのバージョン(例:’1’)
  3. displayName : 表示名(例:’Babukuma’s Database’)
  4. 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);
  1. sqlStatement : SQL
  2. arguments : 引数
  3. callback : 成功時のコールバック
  4. 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

changeVersion(oldVersion, newVersion, migrationHandler, errorHandler, successHandler);
  1. oldVersion : 以前のバージョン
  2. newVersion : 新バージョン
  3. migrationHandler : マイグレーション用関数
  4. errorHandler : エラー時コールバック
  5. 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);
      }
    }
Pocket