【HTML5API】localStorageまとめ


こんばんは、新井です。
明日から3連休ですね!

さて、今日はlocalStorageのお話をしようかと思います。

localStorageとは、ブラウザ内部にkey-value形式でデータを保存しておける便利はHTML5APIです。
データを永続的に保存できるので、PhoneGapアプリでも大活躍します。
(保存容量に上限があるので注意です。ブラウザによりますが大体5MBが限度です。)

基本的な使い方は、

// 保存
// save_item というキーで、save_dataというデータを保存します。
localStorage.setItem('save_item','save_data');

// 取得
// 上記保存を実施した後なら、save_dataという値が返ってくるはずです。
localStorage.getItem('save_item');

// 特定のキーを削除
localStorage.removeItem('save_item');

// localStorageのデータを全部削除
localStorage.clear();

という感じです。
一応
localStorage['key'] = value;
みたいな感じの書き方もできますが、個人的には上記書き方で統一しています。

注意点として、保存できるデータは仕様上は何でもありなはずですが、現状のブラウザの実装は文字列に限定されます。
なので、JSONデータや配列などを保存したい場合は、

var d = {
  'key1': 'value1',
  'key2': 'value2'
};
localStorage.setItem('item',JSON.stringify(d));

という風に、文字列化してあげる必要があります。
逆に使うときは、

var storage_data = JSON.parse(localStorage.getItem('item'));

という感じでパースしてあげると、いいですね。
これで単なる文字列だけじゃなく、多様なデータを保存できるようになりました。

ここで一つ小技です。
getItemしたものの中身が空のこともあります。イチイチif文書くのは面倒なので、

var storage_data = JSON.parse(localStorage.getItem('item')) || {};
// item というキーで何も保存されていなければ、storage_data = {};というのと同じ意味合いの一分になります。

これ、便利ですね。
ただ、これ注意があってAndroidで動きません・・・
(全部の端末で確認したわけではないですが、HTC Evo Android 2.3.4では動きませんでした。。。)
getItemの結果がないのに、parseしようとするなよって怒られるんですね。。。
なので、Android向けには

var storage_data = localStorage.getItem('item') || {};
if (typeof storage_data == 'string') {
  storage_data = JSON.parse(storage_data);
}

としてあげるといいですね。
localStorageには文字列しか入らないので、getItemが成功していれば、型はStringになります。
{}は型がObjectなので、storage_dataの方がStringなら、getItem成功してるってことでparseしてあげる感じです。

毎回JSON.stringifyとかJSON.parseとか書くの面倒なら、ラップしたメソッド作ってみてもいいですね。

function Storage() {
}

Storage.setJson = function(key,value) {
  localStorage.setItem(key,JSON.stringify(value));
};

Storage.getJson = function(key) {
  var d = localStorage.getItem(key) || {};
  if (typeof d == 'string') {
    d = JSON.parse(d);
  }
  return d;
};

便利なlocalStorage、是非使ってみてくださいね〜
ではまた

Let’s enjoy HTML5 Life!!

Leave a Comment

*

Categories

Recent News

HTML5/CSS3/Javascriptのニュースまとめ[8/19〜8/25]

先週のニュース・ブログ記事を紹介していきます! 先週はちょっと少なめで...

PhoneGap3.0がリリースされましたね!

PhoneGap3.0がリリースされましたね! PhoneGap Da...

HTML5/CSS3/Javascriptのニュースまとめ[6/17〜6/23]

今日は先週のニュース・ブログ記事のまとめです。 1.HTML5 歴史的...

HTML5/CSS3/Javascriptのニュースまとめ[6/10〜6/16]

今日は先週のニュース・ブログ記事のまとめです。 個人的に気になったもの...

AndroidのWebViewでUserAgentを独自に設定する方法

今日はAndroidのWebViewでユーザーエージェントを独自のもの...