ウェブストレージについて（Web Storage）

・	ウェブストレージとは？
・	ストレージにデータを保存する
・	ストレージからデータを取得する
・	ストレージからデータを削除する
・	ストレージへのアクセスを監視する

前のページに戻る

ウェブストレージとは？

■ウェブストレージについて

Web Storage は、HTML5 世代の機能です。

http://www.w3.org/TR/webstorage/ (Web Storage) https://html.spec.whatwg.org/multipage/webstorage.html (whatwg)

ストレージは、記憶装置を意味します。

ウェブストレージを使用すると、データをローカル環境に保存することができます。

Internet Explorer 7 以前では、未対応です。

■保存形式について

保存できるのは、文字列形式です。

JSON フォーマットを利用すると、簡単にデータの保存と復元ができます。

■ウェブストレージの種類について

ウェブストレージには、以下の種類があります。

名称	解説
sessionStorage	セッションストレージ一時的にデータを保存することができます。ウィンドウを閉じるタイミングで消えます。同じページを複数のウィンドウで開いた場合、別々に保存されます。
localStorage	ローカルストレージ永続的にデータをローカル環境に保存することができます。

■ウェブストレージのセキュリティについて

ウェブストレージは、生成元（オリジン）ごとに隔離して保存されます。

■生成元（オリジン）について

「プロトコル、ドメイン、ポート番号」の３つを合わせたものです。

■同一生成元ポリシー (Same-Origin Policy) について

自身のオリジンから、別オリジンのストレージにアクセスする事はできません。

オリジンが一致していれば、同じストレージを共有します。

誤って保存データを上書きしたり、消したりしないよう注意して下さい。

例えば、「http://example.com/aaa.html」と「http://example.com/bbb/ccc.html」は、同じストレージを共有します。

■ Storage オブジェクトを取得する

Window オブジェクトには、以下のプロパティがあります。

これらが真となる場合、ブラウザが各ストレージに対応していると判別できます。

プロパティ	型	解説
sessionStorage	Storage	セッションストレージ用 Storage オブジェクト
localStorage	Storage	ローカルストレージ用 Storage オブジェクト

■取得例

セッションストレージにアクセスする


// ウェブストレージに対応している
if(window.sessionStorage){

	// ------------------------------------------------------------
	// セッションストレージオブジェクトを取得する
	// ------------------------------------------------------------
	var session_storage = window.sessionStorage;

	// 出力テスト
	console.log(session_storage);
}

ローカルストレージにアクセスする


// ウェブストレージに対応している
if(window.localStorage){

	// ------------------------------------------------------------
	// ローカルストレージオブジェクトを取得する
	// ------------------------------------------------------------
	var local_storage = window.localStorage;

	// 出力テスト
	console.log(local_storage);
}

上に戻る

ストレージにデータを保存する

ストレージにデータを保存する（メソッドを使用）

ストレージにデータを保存する（アクセス演算子を使用）

■ストレージにデータを保存する

データを保存するには、setItem() メソッドを使用します。

このメソッドは、同期実行です。保存が完了するまで制御が返りません。

一度に大量のデータの保存を試みると、長い時間応答不能に陥ります。

Storage.setItem( "キー情報" , "値" ) :Void

第01引数	String	「キー」となる好きな名前を指定します。
第02引数	String	保存したいデータを指定します。文字列型に変換されます。
戻り値	Void	なし。

■第01引数（キー情報）

キーごとに、個別にデータを保存する事ができます。

■第02引数（値）

保存データは、文字列に変換されます。

JSON フォーマットを利用すると、簡単にオブジェクト型の保存と復元ができます。

■使用例

セッションストレージの "test_key" に、文字列を保存する


// ウェブストレージに対応している
if(window.sessionStorage){

	// ------------------------------------------------------------
	// 保存したい適当な文字列
	// ------------------------------------------------------------
	var str = "保存テスト";

	// ------------------------------------------------------------
	// 文字列を保存
	// ------------------------------------------------------------
	window.sessionStorage.setItem("test_key" , str);
}

ローカルストレージの "test_key" に、 JSON 文字列を保存する


// ウェブストレージに対応している
if(window.localStorage){

	// ------------------------------------------------------------
	// 保存したい適当なオブジェクト
	// ------------------------------------------------------------
	var obj = {
		ary:[0,1,2],
		obj:{
			a:0,
			b:1,
			c:2
		}
	};

	// ------------------------------------------------------------
	// オブジェクトから JSON 文字列に変換
	// ------------------------------------------------------------
	var json_text = JSON.stringify(obj);

	// ------------------------------------------------------------
	// JSON 文字列を保存
	// ------------------------------------------------------------
	window.localStorage.setItem("test_key" , json_text);
}

■ストレージにデータを保存する（アクセス演算子を使用）

ドットアクセス演算子や、配列アクセス演算子を使って保存する事もできます。

「キー」となる好きな名前を指定します。

このアクセス方法は、オススメしません。

setItem() メソッドを使用した方が、将来的に安全です。

■使用例

セッションストレージの "test_key" に、文字列を保存する


// ウェブストレージに対応している
if(window.sessionStorage){

	// ------------------------------------------------------------
	// 保存したい適当な文字列
	// ------------------------------------------------------------
	var str = "保存テスト";

	// ------------------------------------------------------------
	// 文字列を保存
	// ------------------------------------------------------------
	window.sessionStorage.test_key = str;
}

ローカルストレージの "test_key" に、 JSON 文字列を保存する


// ウェブストレージに対応している
if(window.localStorage){

	// ------------------------------------------------------------
	// 保存したい適当なオブジェクト
	// ------------------------------------------------------------
	var obj = {
		ary:[0,1,2],
		obj:{
			a:0,
			b:1,
			c:2
		}
	};

	// ------------------------------------------------------------
	// オブジェクトから JSON 文字列に変換
	// ------------------------------------------------------------
	var json_text = JSON.stringify(obj);

	// ------------------------------------------------------------
	// JSON 文字列を保存
	// ------------------------------------------------------------
	window.localStorage["test_key"] = json_text;
}

上に戻る

ストレージからデータを取得する

ストレージからデータを取得する（メソッドを使用）

ストレージからデータを取得する（アクセス演算子を使用）

ストレージからすべてのキーを取得する

■ストレージからデータを取得する（メソッドを使用）

保存したデータを取り出すには、getItem() メソッドを使用します。

Storage.getItem( "キー情報" ) :String

第01引数	String	保存時に指定した「キー」を指定します。
戻り値	String	保存したデータが文字列で得られます。存在しない場合、null が得られます。

■使用例

セッションストレージの "test_key" に保存した文字列を取得する


// ウェブストレージに対応している
if(window.sessionStorage){

	// ------------------------------------------------------------
	// 書き込みテスト
	// ------------------------------------------------------------
	// 保存したい適当な文字列
	var str = "保存テスト";

	// 文字列を保存
	window.sessionStorage.setItem("test_key" , str);


	// ------------------------------------------------------------
	// 読み込みテスト
	// ------------------------------------------------------------
	// 文字列を読み込み
	var str = window.sessionStorage.getItem("test_key");

	// 出力テスト
	console.log(str);

}

ローカルストレージの "test_key" に保存したデータを取得して、JSON 文字列からオブジェクトを復元する


// ウェブストレージに対応している
if(window.localStorage){

	// ------------------------------------------------------------
	// 書き込みテスト
	// ------------------------------------------------------------
	// 保存したい適当なオブジェクト
	var obj = {
		ary:[0,1,2],
		obj:{
			a:0,
			b:1,
			c:2
		}
	};

	// オブジェクトから JSON 文字列に変換
	var json_text = JSON.stringify(obj);

	// JSON 文字列を保存
	window.localStorage.setItem("test_key" , json_text);


	// ------------------------------------------------------------
	// 読み込みテスト
	// ------------------------------------------------------------
	// JSON 文字列を読み込み
	var str = window.localStorage.getItem("test_key");

	// JSON 文字列からオブジェクトに変換
	var obj = JSON.parse(str);

	// 出力テスト
	console.log(obj);

}

■ストレージからデータを取得する（アクセス演算子を使用）

ドットアクセス演算子や、配列アクセス演算子を使って取得する事もできます。

保存時に指定した「キー」を指定します。

このアクセス方法は、オススメしません。

getItem() メソッドを使用した方が、将来的に安全です。

■使用例

セッションストレージの "test_key" に保存した文字列を取得する


// ウェブストレージに対応している
if(window.sessionStorage){

	// ------------------------------------------------------------
	// 書き込みテスト
	// ------------------------------------------------------------
	// 保存したい適当な文字列
	var str = "保存テスト";

	// 文字列を保存
	window.sessionStorage["test_key"] = str;


	// ------------------------------------------------------------
	// 読み込みテスト
	// ------------------------------------------------------------
	// 文字列を読み込み
	var str = window.sessionStorage["test_key"];

	// 出力テスト
	console.log(str);

}

ローカルストレージの "test_key" に保存したデータを取得して、JSON 文字列からオブジェクトを復元する


// ウェブストレージに対応している
if(window.localStorage){

	// ------------------------------------------------------------
	// 書き込みテスト
	// ------------------------------------------------------------
	// 保存したい適当なオブジェクト
	var obj = {
		ary:[0,1,2],
		obj:{
			a:0,
			b:1,
			c:2
		}
	};

	// オブジェクトから JSON 文字列に変換
	var json_text = JSON.stringify(obj);

	// JSON 文字列を保存
	window.localStorage.test_key = json_text;


	// ------------------------------------------------------------
	// 読み込みテスト
	// ------------------------------------------------------------
	// JSON 文字列を読み込み
	var str = window.localStorage.test_key;

	// JSON 文字列からオブジェクトに変換
	var obj = JSON.parse(str);

	// 出力テスト
	console.log(obj);

}

■ストレージからすべてのキーを取得する

■キーの総数を取得する

length プロパティを使用します。

■位置を指定して、ストレージからキーを取得する

key() メソッドを使用します。

Storage.key( 位置 ) :String

第01引数	Number	位置を指定します。(0～
戻り値	String	キー情報が文字列で得られます。存在しない場合、null が得られます。

■使用例

セッションストレージからすべてのキーを取得する


// ウェブストレージに対応している
if(window.sessionStorage){

	// ------------------------------------------------------------
	// 書き込みテスト
	// ------------------------------------------------------------
	window.sessionStorage.setItem("name0" , "value0");
	window.sessionStorage.setItem("name1" , "value1");
	window.sessionStorage.setItem("name2" , "value2");

	// ------------------------------------------------------------
	// キーの総数を取得する
	// ------------------------------------------------------------
	var num = window.sessionStorage.length;

	// ------------------------------------------------------------
	// ストレージからすべてのキーを取得する
	// ------------------------------------------------------------
	var i;
	for(i=0;i< num;i++){

		// 位置を指定して、ストレージからキーを取得する
		var name = window.sessionStorage.key(i);

		// ストレージからデータを取得する
		var value = window.sessionStorage.getItem(name);

		// 出力テスト
		console.log("name:" + name + " value:" + value);
	}

}

上に戻る

ストレージからデータを削除する

すべてのデータを削除する

■ストレージからデータを削除する

保存したデータを削除するには、removeItem() メソッドを使用します。

Storage.removeItem( "キー情報" ) :Void

第01引数	String	保存時に指定した「キー」を指定します。
戻り値	Void	なし。

■使用例

セッションストレージの "test_key" に格納されたデータを削除する


// ウェブストレージに対応している
if(window.sessionStorage){

	// 指定したキーに保存したデータを削除する
	window.sessionStorage.removeItem("test_key");

}

ローカルストレージの "test_key" に格納されたデータを削除する


// ウェブストレージに対応している
if(window.localStorage){

	// 指定したキーに保存したデータを削除する
	window.localStorage.removeItem("test_key");

}

■すべてのデータを削除する

すべてのデータを削除するには、clear() メソッドを使用します。

対象は、自身の生成元（オリジン）のストレージのみです。

Storage.clear( ) :Void

引数	Void	なし。
戻り値	Void	なし。

■使用例

セッションストレージのすべてのデータを削除する


// ウェブストレージに対応している
if(window.sessionStorage){

	// ストレージ内のデータをすべて削除する
	window.sessionStorage.clear();

}

ローカルストレージのすべてのデータを削除する


// ウェブストレージに対応している
if(window.localStorage){

	// ストレージ内のデータをすべて削除する
	window.localStorage.clear();

}

上に戻る

ストレージへのアクセスを監視する

■ストレージへのアクセスを監視する

ローカルストレージへの書き込みアクセスを監視するには、"storage" イベントを使用します。

他のページで行われた、書き込みアクセスを検出する事ができます。

自身による書き込みアクセスを検出する事はできません。

登録したコールバック関数の引数から、StorageEvent オブジェクトが得られます。

■StorageEvent について

StorageEvent オブジェクトには、以下のプロパティがあります。

プロパティ名	型	説明
key	String	キー情報を取得する。
oldValue	String	変更前の値を取得する。
newValue	String	変更後の値を取得する。
url	String	ストレージにアクセスを行ったページの URL を取得する。
storageArea	Storage	ストレージオブジェクトを取得する。

■使用例

他のページで行われた、ストレージへの書き込みアクセスを監視する


// イベントリスナーに対応している
if(window.addEventListener){

	// ------------------------------------------------------------
	// 他のページで行われたストレージへの書き込みアクセスを監視する
	// ------------------------------------------------------------
	window.addEventListener("storage" , function(e){

		console.log("key: " + e.key);
		console.log("oldValue: " + e.oldValue);
		console.log("newValue: " + e.newValue);
		console.log("url: " + e.url);

	});

}

上に戻る

前のページに戻る