NackLabに載せているHTMLアプリは、ほとんどがlocalStorageを利用しています。その中の一例を紹介します。
localStorageのメソッドの拡張例(エラー処理などを簡略化してあります)
localStorageにptorotypeでメソッドを追加することができないため、LocalStorageをつくり、Stringの値と、それをNumber、boolに変換して返すfunctionを追加しています。
//コンストラクタ。この例ではLocalStorageを宣言しているだけ。
LocalStorage = function() { }
//key、valueのセット。
LocalStorage.set = function(key, val) {
localStorage[key] = val;
}
//LocalStorageからデータを読み出す。Stringが返される。
LocalStorage.stringValue = function(key, defaultValue) {
var str = localStorage[key];
if (str == null) return defaultValue;
return str;
}
//keyの値を数値として返す。値が設定されていない場合は、数値化でエラーとなった場合はdefaultValueを返す。
LocalStorage.numberValue = function(key, defaultValue) {
var val = null;
try {
val = localStorage[key];
if (val == null) val = defaultValue;
return new Number(val);
} catch(e) {
return defaultValue;
}
}
//keyの値をboolとして返す。値が設定されていない場合はdefaultValueを返す。
LocalStorage.boolValue = function(key, defaultValue) {
var val = null;
val = localStorage[key];
if (val == null) val = defaultValue;
return (val.toLowerCase() == "true");
}
LocalStorageの呼び出し例
//body.onloadで呼ぶ
function init() {
divCount.innerText = LocalStorage.numberValue("count", 5);
cbTraining.checked = LocalStorage.boolValue("training", false);
}
//onunloadで呼ぶ。
function save() {
LocalStorage.set("count", divCount.innerText);
LocalStorage.set("training", cbTraining.checked);
}
localStorageの実装例
0 件のコメント:
コメントを投稿