強火で進め

このブログではプログラム関連の記事を中心に書いてます。

Client-Side DatabaseとLocal Storage

HTML5

Client-Side Storage(クライアントサイドストレージ)はリレーショナルDB(SQL文を使うようなDB)。バックグラウンドはSqliteで実装されている事が多いみたいです。

Local Storageはキーバリュー型(キーを指定して値を取得)のDBです。

サンプル

Client-Side Storage

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP"><head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script>
var systemDB;

function initDB() {
  var db = null;
  try {
    if (window.openDatabase) {
      db = window.openDatabase("sampledb", "1.0", "Sample Database", "1048576");
      if (!db) {
        alert("データベースストレージが使えません。");
      }
      db.transaction(
        function (transaction) {
          var text = document.getElementById('sample_text').value;
          transaction.executeSql('CREATE TABLE IF NOT EXISTS sample(id INTEGER NOT NULL PRIMARY KEY, t TEXT);', [], function(tx, rs) {
            insertTextData();
          })
        }
      );
    } else {
      alert("データベースストレージはサポートされていません。");
    }
  } catch (error) {
    if (e == INVALID_STATE_ERR) {
      alert("Invalid database version.");
    } else {
      alert("Unknown error "+e+".");
    }
  }
  return db;
}

function insertTextData() {
  var db = systemDB;
  if (!db) {
    alert("データベースのオープンに失敗しています。");
    return;
  }
  db.transaction(
    function (transaction) {
      transaction.executeSql("INSERT INTO sample VALUES(0, '')")
    }
  );
}

function updateTextData() {
  var db = systemDB;
  if (!db) {
    alert("データベースのオープンに失敗しています。");
    return;
  }
  db.transaction(
    function (transaction) {
      var text = document.getElementById('sample_text').value;
      transaction.executeSql("UPDATE sample set t=? where id=0", [text])
    }
  );
}

function saveTextData() {
  updateTextData();
}

function loadTextData() {
  var db = systemDB;
  if (!db) {
    alert("データベースのオープンに失敗しています。");
    return;
  }

  db.transaction(
    function (transaction) {
      transaction.executeSql('SELECT * FROM sample WHERE id=0', [], function(tx, rs) {
        if (rs.rows.length == 0) {
          insertTextData();
        } else {
          var row = rs.rows.item(0);
          document.getElementById('sample_text').value = row.t;
        }
      });
    }
  );
}

window.addEventListener("load", function() {
  systemDB = initDB();
  loadTextData
}, true);
</script>
	<title>Client-Side Database</title>
</head>
<body>
Client-Side Database<br>
  <input onClick="saveTextData()" type="button" value="save"><input onClick="loadTextData()" type="button" value="load"><br>
  <textarea id="sample_text" rows="5" cols="30"></textarea>
</body>
</html>

Local Storage

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP"><head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script>
function saveTextData() {
  localStorage.t = document.getElementById('sample_text').value;
}

function loadTextData() {
  document.getElementById('sample_text').value = localStorage.t;
}

window.addEventListener("load", function() {
  if (!localStorage) {
    alert('Local Storageをサポートしていません');
  }
}, true);
</script>
	<title>Local Storage</title>
</head>
<body>
Local Storage<br>
  <input onClick="saveTextData()" type="button" value="save"><input onClick="loadTextData()" type="button" value="load"><br>
  <textarea id="sample_text" rows="5" cols="30"></textarea>
</body>
</html>

関連情報

Safari Client-Side Storage and Offline Applications Programming Guide: Introduction
https://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html

HTML 5のローカルデータベース機能: まずDatabaseオブジェクトを取得する - builder
http://builder.japan.zdnet.com/html-css/sp_firefox-3-for-developer-2008/20385468/

HTML 5のローカルデータベース機能を利用してアドレス帳を作成する - builder
http://builder.japan.zdnet.com/html-css/sp_firefox-3-for-developer-2008/20385792/

Safari 3.1 に実装された「Client-side database storage (SQL API)」とは何か？ - IT戦記
http://d.hatena.ne.jp/amachang/20080327/1206607704

HTML5のlocalStorageでiPhone用Webアプリを高速化（1/2） - ＠IT
http://www.atmarkit.co.jp/fsmart/articles/iphoneweb04/01.html

Client-Side Databaseの方の規格。

Web Workers
http://dev.w3.org/html5/workers/#a-worker-for-updating-a-client-side-database

Local Storageの方の規格。

Web Storage
http://dev.w3.org/html5/webstorage/#the-localstorage-attribute