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

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

HTML5 LocalStorageとは

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

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

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

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

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

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


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

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

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

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

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

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

最後に

LocalStorageは簡単にデータの永続化が出来て便利なのですが、以下の懸念点もあります。

• 容量許容値が分からない。
• あと残容量がいくらあるのか分からない。
• Key-Valueの簡単なデータ構造で、親子関係のあるデータ保存はデータ設計を考える必要がある（またはIndexedDBの利用を検討する）。
• 仕様と異なり、いまのところ文字列しか保存できないブラウザが多い。JSONなどの形式で保存するのが吉。

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

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

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