2012/09/01更新

[HTML5] 利用端末のLocalStorageの容量を調べられるページを紹介します

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
LocalStorageの容量を調べる為のサイトを作りました。今日は、そのご紹介をさせて頂ければと思い、 ブログを書きました。

LocalStorage Capacity



HTML5 LocalStorageとは

HTML5のLocalStorageとは、ブラウザ上でデータを永続的に保存できる仕組みです。
JavaScriptから簡単にデータの永続化やデータの取得をすることが可能です。

■ローカルストレージのサンプル
- ローカルストレージを使ったデータの保存/読み出し@YoheiM.NET
- LocalStorageに格納するデータを暗号化する@YoheiM.NET
- Canvasに描画した画像をLocalStorageに保存@YoheiM.NET

簡単にデータを永続化できるのですが、いくつか問題があります。
その問題の一つが保存可能容量です。W3Cの仕様書では、ドメイン毎に5MBが一つの目安と書かれていますが、ブラウザにより容量が異なる場合があります。
また、容量に達した場合の動作も違う場合があります。

そのため、ブラウザにどれだけデータが入るのかを試験できるサイトを作成しました。



LocalStorageの容量を調べられるサイト

LocalStorageの容量を調べたいブラウザで、以下のサイトを訪れて、Runtボタンを押すと、 容量を調べることが出来ます。

LocalStorage Capacity
http://www.yoheim.net/labo/html5/localstorage/checkLocalStorage.html

仕組みは、100KBずつLocalStorageに投入して、エラーが発生するまで投入します。
エラー(QUOTA_EXCEEDED_ERR)が発生したサイズが、そのブラウザの上限という認識になります。

あっもちろん投入してエラーとなった時には、そのテストデータはお掃除して、 ブラウザにゴミとして残らないようにしています。


LocalStorageの容量を調べてみた感想

手持ちのブラウザ/機種で色々とテストしてみた結果ですが、 Chrome, Safari, Firefoxは、5MBのところでエラー(QUOTA_EXCEEDED_ERR)となりました。
Operaは上限に達すると、ユーザーに領域を広げるかを問うという動きでした。 ユーザーがYESを選択した場合は、さらにデータを投入することが出来、NOを選択するエラー(QUOTA_EXCEEDED_ERR)となりました。

あと、iPhone5のSafari, Android2.3のブラウザは、5MBのところで、エラー((QUOTA_EXCEEDED_ERR)となりました。。



最後に

LocalStorageは簡単にデータの永続化が出来て便利なのですが、以下の懸念点もあります。
  • 容量許容値が分からない。
  • あと残容量がいくらあるのか分からない。
  • Key-Valueの簡単なデータ構造で、親子関係のあるデータ保存はデータ設計を考える必要がある(またはIndexedDBの利用を検討する)。
  • 仕様と異なり、いまのところ文字列しか保存できないブラウザが多い。JSONなどの形式で保存するのが吉。

今までは、ブラウザ側でのデータ永続化はCookie(4KBまで)でしたが、 LocalStorageやSessionStorageといった仕組みができたのは、嬉しい限りです。

今後も色々と使って、ノウハウをためて行きたいと思います。

最後までご覧頂きましてありがとうございました。






こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。