Cat Paw Software

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== Web Storage API ======
[[http://www.w3.org/TR/webstorage/|Web Storage]]は、WebブラウザのJavaScriptでアクセスできるキーバリューストアのAPI仕様。データはクライアント側に保存される。現在IE8以降、Opera、Firefox、Safari、Chrome各ブラウザの最新版で使用可能。

===== API =====
localStorage、sessionStorageで使えるメソッド、プロパティ

<code>
interface Storage {
  readonly attribute unsigned long length;
  getter DOMString key(in unsigned long index);
  getter any getItem(in DOMString key);
  setter creator void setItem(in DOMString key, in any data);
  deleter void removeItem(in DOMString key);
  void clear();
};
</code>

<html>
<dt>length</dt>
  <dd>格納されている要素数を取得する</dd>
<dt>key(index) </dt>
  <dd>指定した番号のインデックスにあるキーの値を取得する</dd>
<dt>getItem(key) </dt>
  <dd>指定キーの値を取得</dd>
<dt>setItem(key, data)</dt>
  <dd>keyにdataをアサインする</dd>
<dt>removeItem(key)</dt>
  <dd>指定キーの値を取り除く</dd>
<dt>clear()</dt>
  <dd>ストレージの全データを消去する</dd>
</html>


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

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

<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が対応している。

値の保存と取得には、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>