LocalStorageについておさらい

LocalStorageについておさらい

どうも、さむらいです。

一時期、当社サービスの仕様を確定させるために、LocaStorageについて色々調査しておりました。

今、ちょっと企んでいることがありますので、今回はそれに先駆けて LocalStorage のおさらいをしたいと思います。

LocalStorageとは?

Web 屋さんならご存知の方もいると思いますが、LocalStorage とは Webブラウザが提供する機能のうちの 1 つで、ハードディスクドライブ上にブラウザ上からデータを保存できる機能(領域?)のことです。

Cookieとの違いは

  1. Webサーバに自動送信されない( Cookie はブラウザが勝手に送ります )
  2. Key:Value形式のデータ( 流行りですね )
  3. 有効期限などの属性はない( データ保存形式は Domain + Key + Value のみ )
  4. 保存領域が 2.5Mbyte 〜 5.0Mbyte 以上( Cookie は 4,096 byte )
  5. 消さない限りずっと保持される( 上限サイズを気にしないとダメですね )
  6. ドメイン単位で保持、プロトコルも分けられる( 同一ドメインでも http、https だと別領域に保存されます )

が大きな違いでしょうか。

データ保存容量が Cookie に比べて大きく、いろんなデータを保存できるので可能性が広がりますね。

ブラウザ毎の保存領域(2014年の調査時点のデータです)

今でもそんなに変わっていないと思いますが、こんな感じです。

ブラウザ LocalStorage
SessionStorage
Chrome34約5MByte5MByte
Safari7(Mac)約2.5MByteUnlimited
FireFox27(Windows) 約5MByte 約5MByte
IE8 約5MByte 約5MByte
IE9約4.9MByte約4.9MByte
IE10
IE11 約5MByte 約5MByte
IOS7 Safari 約2.5MByte 約2.5MByte
IOS7 Chrome 約2.5MByte 約2.5MByte
IOS6 Safari
IOS6 Chrome
IOS5 Safari 約2.5MByte 約2.5MByte
IOS5 Chrome 約2.5MByte 約2.5MByte
ところどころ抜けているブラウザがあるのはきっと、その時何か理由があって調査できなかったブラウザだと思います(曖昧)

今だと iOS はもう8.* になっているので再調査した方がいいですね。
多分そんなに変わってないと思いますけど。
あとは、Android も調査対象から外れているので、それも追加した方がいいかな。

ちなみに、IE8 は を書かないと LocalStorage を利用できませんでした。IE7では LocalStorage を利用できないので、互換モードで動作しないようにするためかな。

LocalStorage のご利用方法

LocalStorage へのアクセスは基本的には JavaScript で行います。

LocalStorage にデータを保存するとき

これだけです。簡単ですね。でもご注意を。Cookie と一緒で文字しか保存でません。

LocalStorage からデータを読み出すとき

これだけです。簡単ですね。当然 Key は知っておかなくてはなりません。

LocalStorage にどんな Key があるか知りたいとき

これを実行するとコンソールログに、そのドメイン配下で管理されている LocalStorage 内のデータのキーが出力されます。

LocalStorage を Key を指定して削除するとき

これだけです。簡単ですね。

表示中のサイトの LocalStorage データを全て削除するとき

これだけです。簡単ですね。綺麗さっぱりなくなります。

LocalStorage のデータが何件入っているかを見る時

これだけで。かんた(ry

上記の処理はいづれも JavaScript、あるいは開発者コンソールから入力して実行することができます。普段閲覧しているサイトがどんなデータを LocalStorage に残しているか興味のある人は見てみてください。ほとんどの場合パッと見て意味のある内容はないはずですけど。

それから、LocalStorage には変更を加えられた際に発火するイベントも設定できます。
これはどうやって使うんだろうな。ちょっと考えます。

LocalStorage のご制約

LocalStorage は便利な領域ですが、ブラウザによっては状況次第で利用が制限されます。

例えば、iOS 系の Safari はプライバシーモードの時、LocalStorage にアクセスする際、例外処理を発生させます。読み出しすら許してくれないし、Try の中に入れても JS エラーが発生しちゃうので、美しくない。この辺うまくトラップしてくれればいいのに。

それからサードパーティの JS を読み込んで LocalStorage に書いた時は、当然読み込んだ側のドメイン配下の LocalStorage に保存されます。当たり前すぎてわざわざ書く必要があるのかっていうくらい。一応念頭においておこう。

おまとめ

LocalStorage を使うのは簡単です。

でもブラウザ利用者にデータを消されるとどうしようもないので、大事なデータは残さず、キーとなる情報だけ保存して、それをサーバ側とマッチング処理させるような使い方がメインになるかと思います。

それか、重たい画像や処理をローカルストレージに保存しておいて、2 回目以降のアクセスの時はそこから読み出すようにするとか。そうすると表示処理が早くなっていいかも知れませんね。

お客さんによっては、数十個のJSや巨大な画像をページに読み込んだりもするので、ページ表示最適化、みたいな商品を作ったら売れたりしないかしら。

インターネットの接続スピードはどんどん早くなって、サイトの表示速度が少しでも遅いとユーザはすぐ離れちゃいます。

昔は 8 秒でユーザが離れると言われていたけど、今は 5 秒とか言われているし、時代に合わせていろんな技術を組み合わせて、ページ表示が重くならないように気を使いたいところですね。

ということで、今日はここまで。ではまた。

コメント