クライアントサイドストレージ
- キーバリューストア（DOMストレージ）
  - 使い方
- SQLインターフェース

クライアントサイドストレージ

クライアントサイドストレージは、ブラウザにデータを保存する仕組み。JavaScriptでデータを保存、取得できる。 HTML5の仕様に追加される予定。

キーバリューストア（DOMストレージ）

キーと値のペアでデータを保存する。セッションストレージとローカルストレージの２種類のストレージがある。

セッションストレージ：ウィンドウ（タブ）を閉じるまでデータが保存される。ウィンドウ毎にデータが独立している。
ローカルストレージ：データはウィンドウを閉じても保存されている。複数ウィンドウでデータが共有される。

値に保存できるのは文字列のみである。

サンプルコード

// セッションストレージ
var ss = window.sessionStorage;
ss.setItem("hoge", "ほげ");
window.alert(ss.getItem("hoge"));
 
// ローカルストレージ
var ls = window.localStorage || window.globalStorage[location.hostname];
ls.setItem("hoge", "ほげ");
window.alert(ls.getItem("hoge"));

現在のFirefox 3ではglobalStorageという名前でローカルストレージが実装されていたが、HTML5の仕様では localStorage というインターフェースである。Firefox 3.5からHTML5仕様に沿ったものに変更されたようだ。

最新のブラウザが続々と対応中、2009/03/24時点でFirefox3、Safari4、IE8が対応している。

使い方

以下の５つのメソッドが定義されています。

DOMString key(int)    指定した番号のインデックスにあるキーの値を取得.
DOMString getItem(DOMString)   指定キーの値を取得
void setItem(DOMString, DOMString)  キーに値をアサインする
void removeItem(DOMString)   指定キーの値を取り除く
void clear()    ストレージをクリアする

lengthプロパティが定義されています。

int length ストレージに格納されたアイテムの数を取得

ストレージへの値の取得、セットはgetItem、setItemメソッドを使用する。また、通常のJavaScriptオブジェクトのようにキーをプロパティ名としてアクセスしたり、連想配列のようにアクセスすることもできる。

sessionStorage.setItem("hoge", "fuga")
sessionStorage["hoge"] = "fuga";
sessionStorage.hoge = "fuga";
 
fuga = sessionStorage.getItem("hoge");
fuga = sessionStorage["hoge"];
fuga = sessionStorage.hoge;

ストレージのすべての値を取得する場合は、keyメソッドを使う。

for (int i = 0; i < storage.length; i++) {
  var key = storage.key(i);
  var value = storage.getItem(key);
}

SQLインターフェース

ローカルのデータベースにSQLでデータを保存・取得する。

サンプルコード（for Safari 3.2）

function getDatabase() {
  return window.openDatabase("test", "1.0", "test database", 10240);
}
 
function init() {
  var db = getDatabase();
  var table = getListTable();
  db.transaction( function(tx){
    tx.executeSql("CREATE TABLE IF NOT EXISTS items (id INTEGER PRIMARY KEY, name STRING, value STRING)" , []);
    tx.executeSql("SELECT id, name, value FROM items", [], function(tx, rs){
      for (var i = 0; i < rs.rows.length; i++) {
        var row = rs.rows.item(i);
        table.add(row.id, row.name, row.value);
      }
    });
  });
}
 
function save(name, value) {
   var table = getListTable();
   var db = getDatabase();
   db.transaction(function(tx){
     tx.executeSql("INSERT INTO items (name, value) VALUES (?,?)", [name, value]);
     tx.executeSql("SELECT last_insert_rowid() AS lastId FROM items", [], function(tx, rs) { 
     	table.add(rs.rows.item(0).lastId, name, value);
     });
   });
}

現在SQLインターフェースが実装されているブラウザはSafariのみである。Safariでは開発メニューで現在のページで使用しているローカルDBのテーブルやデータを見る事ができる。

Safariではローカルデータベースの実装にSQlite3が使用されている。他のブラウザは不明だがFirefoxもおそらくSQLiteを使うと思われる。IEが実装する事になった場合はSQL Serverが使われるのではないだろうか…。

SQLインターフェースのサンプル (Safari 3.2以降のみ)