====== クライアントサイドストレージ ======
[[http://www.w3.org/TR/webstorage/|クライアントサイドストレージ]]は、ブラウザにデータを保存する仕組み。JavaScriptでデータを保存、取得できる。
[[HTML5]]の仕様に追加される予定。

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

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

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

サンプルコード
<code javascript>
// セッションストレージ
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"));
</code>

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

  * [[http://paulownia.jp/sample/html5/storage/session.html|セッションストレージのサンプル]]
  * [[http://paulownia.jp/sample/html5/storage/local.html|ローカルストレージのサンプル]]

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

==== 使い方 ====
以下の５つのメソッドが定義されています。
<code>
DOMString key(int)    指定した番号のインデックスにあるキーの値を取得.
DOMString getItem(DOMString)   指定キーの値を取得
void setItem(DOMString, DOMString)  キーに値をアサインする
void removeItem(DOMString)   指定キーの値を取り除く
void clear()    ストレージをクリアする
</code>
lengthプロパティが定義されています。
<code>
int length ストレージに格納されたアイテムの数を取得
</code>

ストレージへの値の取得、セットはgetItem、setItemメソッドを使用する。また、通常のJavaScriptオブジェクトのようにキーをプロパティ名としてアクセスしたり、連想配列のようにアクセスすることもできる。
<code javascript>
sessionStorage.setItem("hoge", "fuga")
sessionStorage["hoge"] = "fuga";
sessionStorage.hoge = "fuga";

fuga = sessionStorage.getItem("hoge");
fuga = sessionStorage["hoge"];
fuga = sessionStorage.hoge;
</code>

ストレージのすべての値を取得する場合は、keyメソッドを使う。
<code javascript>
for (int i = 0; i < storage.length; i++) {
  var key = storage.key(i);
  var value = storage.getItem(key);
}
</code>




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

サンプルコード（for Safari 3.2）
<code javascript>
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);
     });
   });
}
</code>
現在SQLインターフェースが実装されているブラウザはSafariのみである。Safariでは開発メニューで現在のページで使用しているローカルDBのテーブルやデータを見る事ができる。

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

  * [[http://paulownia.jp/sample/html5/storage/db.html|SQLインターフェースのサンプル (Safari 3.2以降のみ)]]