JavaScript プログラミング講座

 

ウェブストレージとは?

 
 


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

 
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 ローカルストレージ
永続的にデータをローカル環境に保存することができます。
 

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

 
ウェブストレージは、生成元(オリジン)ごとに隔離して保存されます。
 
■生成元(オリジン)について
 
プロトコルドメインポート番号」の3つを合わせたものです。
 
 
■同一生成元ポリシー (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 オブジェクトには、以下のプロパティがあります。
 
プロパティ名説明
keyStringキー情報を取得する。
oldValueString変更前の値を取得する。
newValueString変更後の値を取得する。
urlStringストレージにアクセスを行ったページの URL を取得する。
storageAreaStorageストレージオブジェクトを取得する。
 
■使用例
 
他のページで行われた、ストレージへの書き込みアクセスを監視する

// イベントリスナーに対応している
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);

	});

}