Web Storageは、データをブラウザ側に蓄積する仕組みです。

「アプリケーションキャッシュ」同様、「Offline Web Applications」のうちの一つです。>br/> データをブラウザ側に蓄積しますので、オフラインでも利用できます。

これまでブラウザでデータを蓄積する方法としては、Cookieのみでした。
しかし、Cookieには蓄積できるデータサイズに制限があります。
またCookie情報は、ページアクセスの都度サーバに送信されます。
保存期間にも制限がありました。

Web Storageは、Cookie同様 key-value型のストレージです。
ストレージの実体はクライアント(ブラウザ)上に存在します。
そのため、オフラインでも利用ができます。
ブラウザを再起動してもデータは失われません。

Web Storageの特徴

• 容量制限は明示されていません。＝ 大容量に対応
  (クラッシュ防止のため、ブラウザにより制限している場合もあります。大体 5MBほど)
  
• Local Storageにはデータの保存期限はありません。
  (明示的に削除する必要があります。)
  
• サーバーに送信されません。
  

「スキーマ(httpなど):ドメイン名:ポート番号」の組み合わせを「オリジン(orgin)」といいます。
Web Storageは、この「オリジン」毎にで保管されます。

ストレージの種類は以下の2つが用意されています。

Web Storageの種類

Session Storage

セッション ストレージです。
セッション(ブラウザコンテキスト)単位にデータを保存・管理します。
ブラウザのタブ、ウィンドウを閉じるとデータは破棄されます。
※詳細は次項「Session Storage」参照

Local Storage

ローカル ストレージです。
永続的にデータを保存・管理します。
ブラウザのタブ、ウィンドウを閉じてもデータは破棄されません。
※詳細は次項「Local Storage」参照

各ブラウザの対応

Web Storageは、2011年8月現在以下のブラウザで対応しています。
FireFox 3.5～、Safari 4～、Opera 10.6～、Google Chrome 3～、IE 8～

セッション(ブラウザコンテキスト)単位にデータを保存・管理します。
ブラウザのタブ、ウィンドウを閉じるとデータは破棄されます。

ブラウザのタブやウィンドウを1つの単位(ブラウザコンテキスト)とします。
有効期限をしてしないCookieと似ています。

Cookieとの違いは、前述の通り「大容量に対応」「サーバに送信されない」です。

<div id="inp0201">
	<lavel>キー:<input id="inp0201_k" placeholder="キー(名前)を入力" /></label>
	<lavel>値　:<input id="inp0201_v" placeholder="値を入力" /></label>
	<button onclick="addKV()">追加</button>
	<p id="inp0201_p"></p>
	<button onclick="clrKV()">クリア</button>
	<button onclick="window.open('html5_2400.html');">別タブ(ウィンドウ)を開く</button>
</div>
<script>
//ストレージに保存
function addKV(){
	// ストレージオブジェクト
	var o = window.sessionStorage;
	var k = document.getElementById('inp0201_k');
	var v = document.getElementById('inp0201_v');
	//キーと値をセット
	var key = k.value;
	var val = v.value;
	if( key == "" || val == "" ){
		return;
	}
	o.setItem(key,val);
	k.value = "";
	v.value = "";
	showKV();
}

//ストレージのクリア
function clrKV(){
	// ストレージオブジェクト
	var o = window.sessionStorage;
	//データのクリア
	o.clear();
	showKV();
}

//ストレージの閲覧
function showKV(){
	// ストレージオブジェクト
	var o = window.sessionStorage;
	var p = document.getElementById('inp0201_p');
	// データの呼び出し
	var str = "";
	for( var i=0; i < o.length; i++){
		var key = o.key(i);
		var val = o.getItem(key);
		str = str + i + ":"
			+ key + " = "
			+ val + "<br/>\n";
	}
	p.innerHTML = str;
}
</script>

ブラウザを閉じなくても、同じオリジンでタブやウィンドウを閉じた時に破棄されます。
しかし、同じオリジンで複数のタブやウィンドウを開いている場合は当該オリジンのタブやウィンドウを全て閉じないと破棄されません。

永続的にデータを保存・管理します。
ブラウザのタブ、ウィンドウを閉じてもデータは破棄されません。

ユーザが明示的に削除をしない限り、ブラウザを閉じてもデータは破棄されません。

<div id="inp0302">
	<lavel>キー:<input id="inp0302_k" placeholder="キー(名前)を入力" /></label>
	<lavel>値　:<input id="inp0302_v" placeholder="値を入力" /></label>
	<button onclick="addKV()">追加</button>
	<p id="inp0302_p"></p>
	<button onclick="clrKV()">クリア</button>
	<button onclick="window.open('html5_2400.html');">別タブ(ウィンドウ)を開く</button>
</div>
<script>
//ストレージに保存
function addKV(){
	// ストレージオブジェクト
	var o = window.localStorage;
	var k = document.getElementById('inp0302_k');
	var v = document.getElementById('inp0302_v');
	//キーと値をセット
	var key = k.value;
	var val = v.value;
	if( key == "" || val == "" ){
		return;
	}
	o.setItem(key,val);
	k.value = "";
	v.value = "";
	showKV();
}

//ストレージのクリア
function clrKV(){
	// ストレージオブジェクト
	var o = window.localStorage;
	//データのクリア
	o.clear();
	showKV();
}

//ストレージの閲覧
function showKV(){
	// ストレージオブジェクト
	var o = window.localStorage;
	var p = document.getElementById('inp0302_p');
	// データの呼び出し
	var str = "";
	for( var i=0; i < o.length; i++){
		var key = o.key(i);
		var val = o.getItem(key);
		str = str + i + ":"
			+ key + " = "
			+ val + "<br/>\n";
	}
	p.innerHTML = str;
}
</script>

Web Storageは、呼び出すオブジェクトが Session Storageオブジェクト、LocalStorageオブジェクトの違いはありますが、APIのプロパティやメソッドは同じです。

(ストレージオブジェクト).setItem( key , value )

keyとvalueの組み合わせで、Web Storageにデータを保存します。
同じkeyの場合は、上書きされます。

(ストレージオブジェクト).getItem( key )

Web Storageから、keyで保存されているデータを取得します。

(ストレージオブジェクト).removeItem( key )

Web Storageから、keyで保存されているデータを削除します。

(ストレージオブジェクト).clear()

Web Storage内のデータを全て削除します。

(ストレージオブジェクト).key( n )

Web Storageから、n番目のkeyを取得します。

(ストレージオブジェクト).length

Web Storageに保存されているデータ数のプロパティです。

このAPIで取り扱えるデータは、スカラー値(文字列)のみです。
但し、JSON形式のテキストは扱えますので、より複雑な情報もJSON形式に変換すれば取り扱えます。

Web Storageは、同じオリジンであれば異なるページでもデータを共有できます。
例えば、このドメイン「http://www.confrage.com/」であれば、他のページとデータを共有できます。
現在、「http://www.confrage.com/html5/」以下のページで保存したデータは、「http://www.confrage.com/excel/」とも共有しています。

そのため、機器を共有している場合、同じオリジンのデータは利用できてしまいます。
共有機器での個人的な情報を取り扱う場合は、最新の注意が必要です。

また、取り扱えるデータが文字列のみです。
暗号化等が必要な場合は、別途処理する必要があります。

現在のスマートフォンで用いられるアプリには、WEBアプリケーションとしてhtml5を利用しているものも多くあります。
Web Storageは、WEBアプリケーションで作られたアプリの最も中枢となる機能です。
特に、Local Storageはブラウザを閉じたり、スマートフォンを再起動してもデータは維持されます。
また、前述の通り、「オフライン機能」の一つとも言えます。
移動中に通信できなくても、ストレージとして機能します。
閲覧設定の情報を管理する方法として、スマートフォンでは重宝される機能と言えます。