HTML5では「Web Storage」というローカルにデータを保存する仕組みがあります。

CEPパネルでもこれを利用することが可能です。

Web Storageにはセッションごとにデータがクリアされる「session Storage」と、削除されるまではセッションが終了してもデータが保持される「local Storage」があります。

ここではより有用なlocal Storageについて取り上げます。

 

データの保存と読み込みにはlocalStorageオブジェクトを使います。基本的には連想配列と同様ですが、localStorageではsetItem関数とgetItem関数を利用します。

//localStorage.setItem(key, val);
localStorage.setItem("name", "nakatoji"); //保存
var res= localStorage.getItem("name"); //読み込み
alert(res);

 

通常の配列同様、lengthで要素数を知ることが出来ます。

localStorage.setItem("name", "nakatoji");
localStorage.setItem("age", 101); localStorage.setItem("place", "tokyo"); var res= localStorage.length; alert(res); //3

 

要素の削除にはremoveItem関数を使います。

//直前の例(要素数=3)が保持されてるものとして...
localStorage.removeItem("age");
alert(localStorage.length); //2
var res= localStorage.getItem("age");
alert(res); //null

 

localStorageの内容をすべて消去する場合はclear関数を使います。

localStorage.clear();

 

このlocalStorageはホストアプリケーションを終了しても値が保持されます。また、パネル(Extension)毎に区別されるので他のパネルから浸食されることはありません(逆も然り)。

また、同じパネルを複数のアプリケーションに対応させている場合も、アプリケーション毎に区別されます。

 

<初期設定値などを保存する>

localStorageはアプリケーションが終了しても値が保持されるので、これをパネルを開いたときの初期設定値の記録に使うことが出来ます。

前述のような方法でひとつひとつ記録してもよいのですが、初期設定値には様々な値がありますのでJSONオブジェクトを利用するのがよいでしょう。

//ローカルストレージに保存
function savePref(data) {
	var saveData= JSON.stringify(data);
	localStorage.setItem("pref", saveData);
}
//ローカルストレージから読み込む
function loadPref() {
	return JSON.parse(localStorage.getItem("pref"));
}
//---------------
var currentData= {
	"name": "nakatoji",
	"age": 101,
	"place": "Tokyo"
};
savePref(currentData);
var myPref= loadPref();
alert("name:"+myPref.name+" / age:"+myPref.age+" / place:"+myPref.place);

 

 

Joomla templates by a4joomla