2012年7月11日水曜日

localStorageの実装例



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 件のコメント: