Web Storage－HTML5のAPI、および、関連仕様

トップページ > HTML5のAPI、および、関連仕様 > Web Storage

★Web Storage

Web Storage
Internet Explorer8

■Web Storageとは

Web Storageは、ユーザーのローカル環境（ブラウザ）にデータを保存するための仕組みです。データの保存・上書き・削除・全クリアなどの操作は、JavaScriptで行うことができます。

Web Storageを利用すると、ユーザーごとにカスタマイズされた情報を提供することが可能となります。この仕組みはクッキー（HTTP cookie）とよく似ていますが、クッキーに比べて保存できる容量が大きいため、例えば、オフラインでもウェブアプリケーションを動作させられるだけの必要十分なデータをユーザーのローカル環境に保存することなどが可能となります。

Web Storageには、sessionStorageとlocalStorageの２種類のストレージが用意されています。どちらもキー（key）と値（value）をペアにしたデータのリストをユーザーのローカル環境に保存するkey-value型のデータ保存形式である点は同じですが、データの有効期限などが異なるので目的に応じて使い分けます。

	別ウィンドウでのデータ共有	データの有効期限	データ量の上限	サーバーへのデータ送信
クッキー	○	指定期限まで有効	4KB	サーバーへアクセスするたびに毎回自動送信
sessionStorage	×	ウィンドウやタブを閉じるまで有効	1オリジン当たり5MB	必要時のみスクリプトやフォームなどで送信
localStorage	○	永続的に有効	1オリジン当たり5MB	必要時のみスクリプトやフォームなどで送信

■sessionStorageは、一回限りのセッションで有効なストレージ

sessionStorageは、ウィンドウやタブ単位での一回限りのセッションで有効なストレージです。ウィンドウやタブが開いている間のみデータが保存され、閉じるとデータが失われます。同じドメインのサイトを別々のウィンドウで開いている場合には、それぞれが別のsessionStorageとなります。クッキーとは異なり、ウィンドウ間でデータが共有されることはありません。

sessionStorageを利用する一例を挙げてみます。例えば、2つのウィンドウで同じサイトを開きながら航空券を注文する場合、クッキーでは買い物かご情報が混在してしまって、同じフライトのチケットを気づかずに2枚注文してしまう可能性があります。

sessionStorageでは、それぞれが別のセッションとなるため、別ウィンドウの買い物かご情報が混在してしまうことがありません。

■localStorageは、オリジン単位でデータを永続的に保存するストレージ

localStorageは、オリジン単位でデータを永続的に保存するストレージです。オリジンとは、「http://www.example.com:80」のような「プロトコル://ドメイン名:ポート番号」のことです。オリジンが同じであれば別ウィンドウでもデータを共有でき、ブラウザを終了してもデータは失われません。データ保存量の上限はブラウザへの推奨値が1オリジン当たり5MBとされており、クッキーの4KBに比べるとより大きなデータを保存できるようになっています。

localStorageを利用する一例を挙げてみます。例えば、ウェブメールにおけるメールの送受信データのような比較的大きなデータの場合、クッキーでは保存できるデータ量に上限があるため、すべてのデータをローカル環境に保存することは困難です。また、クッキーではユーザーがアクセスする度にデータがサーバーに送信されるため、セキュリティの観点からも好ましくありません。

localStorageでは、ローカル環境に5MBまでのデータを永続的に保存でき、ユーザーのアクセスの度にデータがサーバーに送信されることがありません。ウェブメールの例で言えば、localStorageなら送受信データをローカル環境に保存でき、オフラインウェブアプリケーションと組み合わせることで、オフラインでのメール閲覧なども可能となるでしょう。

■Web Storageで指定できる命令

Web Storageで指定できる命令は、データの保存・保存したデータの取得・指定キーの値削除・全クリアのいずれかです。それぞれの命令を指定するメソッドは以下の通りです。メソッド・属性は、sessionStorageとlocalStorageで共通となります。

getItem(key) …… keyに対応するvalueを取得する
setItem(key, value) …… keyとvalueをペアにしてデータを保存する
removeItem(key) …… keyに対応するvalueを削除する
clear() …… データをすべてクリアする

Web Storageのメソッド・属性の一覧

例えば、useridというキー（key）と、1111という値（value）をペアにして保存する場合には、以下のように指定します。

JavaScriptソース

//変数storageにsessionStorageを格納
var storage = sessionStorage;

//useridというキーに1111という値を割り当てて保存
storage.setItem('userid', '1111');

//後からvalueを変更してセットし直せば上書き保存される
storage.setItem('userid', '2222');

//useridというキーの値を取得する（2222が返るはず）
storage.getItem('userid');

//useridというキーの値を削除する
storage.removeItem('userid');

//ストレージに保存されているデータをすべてクリアする
storage.clear();

尚、上のサンプルではsessionStorageとしてデータを保存していますが、「sessionStorage」の部分を「localStorage」に変えれば localStorageとしてデータが保存されます。

■Web Storageのイベント

sessionStorageとlocalStorageにデータの追加・上書き・削除・全クリアなどの何らかの更新をするとstorageというイベントが発生します。 storageイベントには、以下の属性が用意されています。

属性名	返り値
key	更新されたkey
oldValue	更新されたkeyの古いvalue
newValue	更新されたkeyの新しいvalue
url	keyが更新された文書のURL
storageArea	更新によって影響を受けたStorageオブジェクト

■Web Storageのサンプル　ソース

HTML + JavaScriptソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<script>
//変数storageにsessionStorageを格納
var storage = sessionStorage;

//データを保存する
function set() {
  var k = document.getElementById("k").value;
  var v = document.getElementById("v").value;
  storage.setItem(k, v);
  show_result();
}

//データをクリアする
function cle() {
  storage.clear();
  show_result();
}

//保存されているデータをリスト表示する
function show_result() {
  var result = "";
  //保存されているデータの数だけループ
  for(var i=0; i<storage.length; i++){
    //i番目のキーを取得
    var k = storage.key(i);
    //キーと値をコロン（：）区切りのテキストにする
    result += k + "：" + storage.getItem(k) + "<br>";
  }
  //上のループで作成されたテキストを表示する
  document.getElementById("show_result").innerHTML = result;
}
</script>
<title>Web Storage　サンプル</title>
</head>
<body>
<p>
キー：<input id="k" type="text">
値：<input id="v" type="text">
<input type="button" value="ストレージに保存" onClick="set()">
</p>
<p>
<div id="show_result"></div>
<input type="button" value="ストレージをクリア" onClick="cle()">
</p>
</body>
</html>

サンプルを別画面で開く

■Web Storageのメソッド・属性

Web Storageには、以下のメソッド・属性が用意されています。

ストレージインターフェース　The Storage interface

length …… 保存されているデータの数を返す
key(n) …… 保存されているn番目のkeyを返す
getItem(key) …… keyに対応するvalueを取得する
setItem(key, value) …… keyとvalueのペアでデータを保存する
removeItem(key) …… keyに対応するvalueを削除する
clear() …… データをすべてクリアする

http://www.w3.org/TR/webstorage/#the-storage-interface

<前へ

記事一覧へ

次へ>