Web Storage ( sessionStorage, localStorage )

　Web Storage は、ユーザーのローカル環境（ブラウザ）にデータを保存するための仕組みです。Web Storageには、sessionStorageとlocalStorageの２種類のストレージがあります。
　Cookie に似た機能ですが、容量の大きさ、保存期間、保存しているデータをサーバーに送信するか否かを任意に決められることが違います。

sessionStorage での設定

<script type="text/javascript">
var key = "examle";
var value = "test";
var storage = window.sessionStorage.setItem(key, value);
</script>

　Web Storage は、キー（key）と値（ value ）をペアにしたデータのリストをユーザーのローカル環境に保存します。
　sessionStorage と localStorage は、データの有効期限などが異なるので目的に応じて使い分けます。

　sessionStorage は、ブラウザのウィンドウやタブを閉じるといった web ページを閉じるとこのデータは破棄されます。
　localStorage は指定をしない限りデータの保存期限がなく、 web ページを閉じてもデータは破棄されません。

　Web Storage のデータの保存・上書き・削除・全クリアなどの操作は、JavaScript でも操作できます。

　Web Storage では、５Mbyteを記憶しておくことができます。

- ad -

sessionStorage

Window.sessionStorage

　sessionStorage オブジェクトは window.sessionStorage で取得します。Window は省略可能で、sessionStorage と書くこともできます。

　オリジン単位でデータを保存します。
　オリジンとは、「プロトコル://ドメイン名:ポート番号」といった例えば、「http://www.example.com:80」で、サーバーを示すURLです。このオリジン（サーバーとポート番号）さえ同じなら、複数のウィンドウでデータを共有することができます。

　ストレージのデータの確認、保存するには以下のプロパティとメソッドを使用します。

プロパティ	概要
length	保存されているデータの数を返す
メソッド	概要
key(n)	n 番目の key を返す
getItem(key)	key に対応する value の取得
setItem(key, value)	データの保存。key と value のペア
removeItem(key)	key に対応する value を削除
clear()	データをすべてクリアする

Example

<script type="text/javascript">
	// sessionStorage オブジェクトを取得 ( var storage = sessionStorage でも可 )
	var storage = window.sessionStorage;

	//データの保存
	var key = "examle";
	var value = "test";
	storage.setItem(key, value);

	// ストレージの状態を表示
	console.log( storage );

	//データをクリアする
	storage.clear();

	// クリアされたストレージを確認
	console.log( storage );

</script>

データの取得

　データの取得は以下のように getItem() メソッドを使用します。

getItem()

var value = window.sessionStorage.getItem("example");

データの値の削除

　データの値の削除は以下のように removeItem() メソッドを使用します。

removeItem()

var value = window.sessionStorage.removeItem("example");

localStorage

Window.localStorage

　localStorage オブジェクトは Window.localStorage で取得します。Window は省略可能で、localStorage と書くこともできます。

　localStorage は指定をしない限りデータの保存期限がなく、ブラウザのウィンドウやタブを閉じるといった web ページを閉じてもデータは破棄されません。
　sessionStorage は、web ページを閉じるとこのデータは破棄されます。

　sessionStorage の部分が localStorage になるだけです。

<script type="text/javascript">
	// sessionStorage オブジェクトを取得 ( var storage = localStorage でも可 )
	var storage = window.localStorage;

	//データの保存
	var key = "examle";
	var value = "test";
	storage.setItem(key, value);

	// ストレージの状態を表示
	console.log( storage );
</script>