R-SQUARE.net

研究開発部

Web Storage のうち localStorage を試してみる

Web Storage は クライアントサイドにデータを保存する仕組み。
Cookieより容量が大きい。Cookieには有効期限があるが、localStorageにはない。
sessionStorageの有効期限は開いているウィンドウ(タブ)を閉じるまで?らしい。

サンプルソース

localStrageに保存する文字列を入力するテキストエリア
<textarea id="memo" cols="100" rows="10" placeholder="ここになにか入力してね。"></textarea>
<ul class="btn">
  <li><button id="saveLocalBtn">ローカル保存</button></li>
  <li><button id="removeLocalBtn">ローカル削除</button></li>
  <li><button id="restoreLocalBtn">ローカル復元</button></li>
</ul>
<div id="status"></div>

テキストエリアに入力した内容をlocalStrageに保存したり、削除したりするJavaScript
<script>
$(document).ready(function(){
  localStorage.setItem('R2MEMO',"localStorage test.");
  
  status("Ready OK.");
  
  $("#saveLocalBtn").click(function(){
    saveLocal();
  });
  
  $("#removeLocalBtn").click(function(){
    removeLocal();
  });
  
  $("#restoreLocalBtn").click(function(){
    restoreLocal();
  });
});

$(window).bind('storage',function(event){
  //別のウィンドウでWebStorageに変更があった場合、storageイベント発生
  status('storage is changed.');
  
  var strEv = event.originalEvent;
  var msg ="";
  msg += ("key : " + strEv['key'] + ", ");
  msg += ("oldValue : " + strEv['oldValue'] + ", ");
  msg += ("newValue : " + strEv['newValue'] + ", ");
  msg += ("url : " + strEv['url'] + "\n");
  
  console.debug(msg);
});

function save() {
  var inputValue = $("#memo").val();
  var len = inputValue.length;
  var nowStr = (new Date()).toString();
  
  if (len > 0) {
    localStorage.setItem('R2MEMO_VALUE', inputValue);
    localStorage.setItem('R2MEMO_MODIFIED_DATE', nowStr);
  
  // 連想配列の形式でもOK
  // localStorage['R2MEMO_VALUE'] = inputValue;
  // localStorage['R2MEMO_MODIFIED_DATE'] = nowStr;
  }
  return len;
}
function removeAll() {
  localStorage.removeItem('R2MEMO');
  localStorage.removeItem('R2MEMO_VALUE');
  localStorage.removeItem('R2MEMO_MODIFIED_DATE');
}
function restore() {
  var localValue = localStorage.getItem('R2MEMO_VALUE');
  // 連想配列の形式でもOK
  //var localValue = localStorage['R2MEMO_VALUE'];
  
  var len = 0;
  if (localValue != null) {
    len = localValue.length;
  }
  if (len > 0) {
    $("#memo").val(localValue);
  }
  return len;
}

function saveLocal() {
  var len = save();
  if (len > 0) {
    status("Save Local.");
  } else {
    alert("nothing to save.");
  }
}
function removeLocal() {
  removeAll();
  status("Remove Local.");
}
function restoreLocal() {
  var len = restore();
  if (len > 0) {
    status("Restore Local.");
  } else {
    alert("nothing to restore.");
  }
}
function status(msg){
  var sm ="";
  for (var i = 0;i < localStorage.length; i++) {
    var key = localStorage.key(i);
  var value = localStorage.getItem(key);
    sm += key + " : " + value + "<br/>";
  }
  
  sm = msg + "<hr/>" + sm ;
  $("#status").html(sm);
}
</script>


動作例

  1. テキストエリアになんやかや入力した後、「ローカル保存」ボタンをクリックしてみてね。
  2. 「ローカル保存」ボタンをクリックした後、テキストエリアにさらにごにょごにょ入力し「ローカル復元」ボタンをクリックしてみてね。
  3. 「ローカル削除」ボタンをクリックしてみてね。
  4. テキストエリアからっぽの状態で、「ローカル保存」「ローカル削除」「ローカル復元」ボタンをクリックしてみてね。
  5. テキストエリアになんやかや入力して「ローカル保存」ボタンをクリックして localStorage に保存した後、別のウィンドウ(タブ)で同じURLにアクセスしてみてね。


まとめ

  • localStrageオブジェクトにアクセスするには、getItem()、setItem()メソッドを使う。
  • localStrageオブジェクトから値を抹殺するには、removeItem()メソッドを使う。
  • localStrageオブジェクトには連想配列の形式でもアクセスできる。
  • 複数のウィンドウで同じlocalStrageオブジェクトを参照している場合、一つのウィンドウでlocalStrageオブジェクトを変更すると、別のウィンドウにstorageイベントが発生する
  • storageイベントは変更するたび発生するので、一度に複数のkeyに対して変更を加えると、複数のstorageイベントが発生する。
  • JSON.stringfy()かました値を一つのキーで格納すれば、って話か。
  • オフラインWebアプリケーションと組み合わせて使うとよさげ。


参考サイト

Web Storage 仕様
http://www.w3.org/TR/webstorage/
Web Storage 仕様 日本語訳
http://www.hcn.zaq.ne.jp/___/WEB/WebStorage-ja.html?REC
Web Storage-HTML5のAPI、および、関連仕様
http://www.htmq.com/webstorage/
last modified : 2015-11-26T19:10:33+09:00