WebStorageのドメイン内競合を防止する

 localStorageもsessionStorageも1つのドメインに対して1つ(以下)のオブジェクトを持つ。したがって、1つのドメイン内に複数の独立したサービスが存在する場合には競合が発生する。競合を防止するのに一番簡単な方法は要素名にサービス名のプレフィックスを付けることであるが、システム全体の整合性を考えるとサービスの競合を解決するクラスを定義するのがスマートである。

 大雑把にLocalStorageの実装例を示すと下記のようになる。(より高速な実装などもあるがわかりやすさ優先のためここでは割愛する。)

LocalStorage=function(){}
LocalStorage.prototype={
	getService:function(){return this.service;},
	setService:function(serviceName){this.service=serviceName;},
	get:function(itemName){return localStorage.getItem(this.service?(this.service+'-'+itemName):itemName);},
	set:function(itemName,itemValue){localStorage.setItem(this.service?(this.service+'-'+itemName):itemName,itemValue);},
	unset:function(itemName){localStorage.removeItem(this.service?(this.service+'-'+itemName):itemName);},
	clear:function(){...},
	each:function(callback){...}
}

 SessionStorageクラスの実装も同様である。なお、両クラスとも実装が似ているため共通親クラスStorageクラスを定義してインプリメントするとよりシンプルな実装となる。また、localStorageとsessionStorageはほぼ同じI/Fなので、下記のようにコンストラクタでメンバ変数に参照を持たせるようにすると共通化が楽である。

LocalStorage=function(){this.storage=localStorage;}
SessionStorage=function(){this.storage=sessionStorage_;}

 余談であるが、LocalStorageやSessionStorageに加えて、CacheStorageというように揮発性領域に関しても同じI/Fでクラス化しておくとコードの再利用がより容易になる。ちなみに、CacheStorageについてはドメイン内競合は発生しないため、実装はより単純であり、説明は割愛させてもらおう。

カテゴリー: html5_storage   タグ: , , , ,   この投稿のパーマリンク

コメントを残す