Web Storageとは、ブラウザ標準で利用できるHTML5のデータストアの一種で、データを特定するための名前(key)と値との組み合わせでデータを管理するKey-Value型データストアです。

従来からのcookieと比べると、データサイズは、cookieが4KBに対して、Web Storageは5MBまで保存できます。またcookieは有効期限がありますが、Web Storageにはありません。

Web Storageには2種類あります。

・Session Storage
ブラウザが起動している間だけ有効で、終了するとデータは削除されます。
・Local Storage
ブラウザを終了しても、データが保持されます。

以下はLocal Storageのサンプルです。。テキストフォールドになにか入力後、「データ保存」クリックで、データをローカルに保存します。「データ読み込み」ボタンクリックで、保存した内容を表示します。また、ブラウザを終了しても保存したデータは保持されます。

Local Storageのテスト

 

最終保存時刻(ローカル):
データ:
$(document).ready(function(){
	$('#btnsave').click(function(){
		if(window.localStorage){
			var sdata = $('#data1').val();
			var date1 = (new Date()).toLocaleString();
			localStorage.setItem("key1", sdata);
			localStorage.setItem("key2", date1);
		}
	});
	$('#btnread').click(function(){
		if(window.localStorage){
			$('#data2').text( localStorage.getItem("key1") );
			$('#date2').text( localStorage.getItem("key2") );
		}
	});
});
戻るボタン