WebStorageでブラウザにデータを保存してみる

HTML5のWebStorageを触る機会があったので簡単なスクリプトを書いてみた。

/** 
 * WebStorageのCRUDを行います 
 * この関数ではオブジェクト宣言時にWebStorageオブジェクトをstorageObjectにコピーし、
 * ページ遷移が行われた際にオブジェクトを再度WebStorageに書き込みます。
 * よって、ここで行われるCRUD操作の対象は全てstorageObjectとなります。
 *
 * @insert 新規にオブジェクトを追加
 * @remove 既存オブジェクトを削除
 * @select 指定オブジェクトを取得
 * @clear  storageObjectのプロパティを初期化 
 */
var WebStorageManager = (function(){
 
	var storageObj = {};
 
	//オブジェクト宣言時にWebStorageの値を取得する
	for(var key in localStorage){
		if(localStorage.hasOwnProperty(key)){
			storageObj[key] = JSON.parse(localStorage[key]);
		}
	}
 
	//ページ遷移時にWebStorageに書き込みを行う
	window.onbeforeunload= function(){
		
		for(var key in storageObj){
			localStorage[key] = JSON.stringify(storageObj[key]);
		}
	}
 
	return {
		
		insert : function(key , value){
			storageObj[key] = value;
		},
 
		remove : function(key){
			delete storageObj[key];
		},
 
		select : function(key){
			return storageObj[key];
		},
 
		clear : function(){
			storageObj = {};
		},
 
		onTest : window.onbeforeunload= function(){
			alert("OK");
		}
	}
 
})();

基本的にリソースへのアクセスは最低限に抑えたほうがパフォーマンスが良いので
書き込み処理に関してはアプリケーションに合わせて実装するのがベター。

注意点としてはWebStorageの記憶領域が5MBということ。
※本来は無制限らしいけどブラウザの設定で制限されているため。
 つまり5MB以下の可能性もある。