localStorage概要

localStorage(ローカルストレージ)はブラウザにデータを保存する仕様。
似たようなものにCookieがあるが、文字数制限もなく使い勝手がいい。

色々なデータ型でも使えるように関数にまとめてみました。

//Set to LocalStorage
function upDateLocalStorage(key, value, callback) {
  //ローカルストレージがない環境では何もしない
  if(typeof(Storage) === 'undefined'){ alert('Your Browser Not Supportd'); return; }

  var ls = localStorage;

  //登録するデータがオブジェクト(配列含む)なら文字列に変換
  if (Object.prototype.toString.call(value) === '[object Object]'||'[object Array]') {
    value = JSON.stringify(value);
  }

  ls.setItem(key, value);

  //データがlocalStorageに登録された時に発火するイベントを登録することもできる
  if(callback) {
    window.addEventListener('storage', function(e) {
      callback(e);
    });
  }
}

//Get from LocalStorage
function getDataLocalStorage(key) {
  //ローカルストレージがない環境では何もしない
  if(typeof(Storage) === 'undefined'){ alert('Your Browser Not Supportd'); return; }

  var ls = localStorage,
      value = ls.getItem(key);

  if(value === 'true'|| value === 'false') {
    value = !!value //文字列から真偽値に
  } else if (value.match(/[\[|{].*[\]|}]/)) {
    value = JSON.parse(value); //文字列からオブジェクトに
  }

  return value;
}

//clear LocalStorage
localStorage.clear(); //ローカルストレージを空にする

使い方↓


upDateLocalStorage("student1", "tarou");
getDataLocalStorage("student1");