localStorageまとめと注意事項
HTML5 APIの一種であるｌocalStorage。実際に使ってみたところ、各ブラウザ間で挙動が異なったりで戸惑うことが多かったので、localStorageについてまとめと注意事項を説明したいと思います。
主な使い道
・ちょっとしたメモアプリに
・ユーザーの設定の保存(例えば背景や文字サイズの設定を保存)
・スマホサイトの高速化に
localStorageのプロパティ
length … ストレージへ格納されてた数を取得
key(index) … 項目のインデックスを指定してキーを取得
getItem(key) … キーを指定して値を取得。
setItem(key, data) … 指定されたキーを保存
removeItem(key) … 指定されたキーを削除
clear() … ストレージをクリア
対応ブラウザ
| ブラウザ | バージョン |
|---|---|
| Internet Explorer | 8 |
| Firefox | 3.5+ | Safari | 4.0 |
| Goole Chrome | 4.0 |
| Opera | 11 |
localStorage非対応ブラウザでの実装方法
localStorage非対応ブラウザでもGearsにて実装することが可能。
これにより、IE７以前や、Android1.6でもlocalStorageを実装することが出来る
そもそもGearsって何？
現在GoogleはWebアプリのオフライン化を実現する拡張機能「Gears」を終了して、HTML5へ移行すると発表しました。
ただ、これからもlocalStorageをはじめ、非対応ブラウザにHTML5 APIのような拡張機能を持たせるときにはお世話になることでしょう。
第1回 そもそもGoogle Gearsって何？
IE6でWeb Databaseをサポートするハック
基本的な使い方
よく使うのはこんなところ
var hoge = localStorage.getItem("text");//textというキー名で保存したデータの呼び出し
localStorage.setItem("hoge", hogehoge);//hogeというキー名で変数hogehogeを保存
localStorage.clear();//全ての key と 値 を削除
localStorage注意事項
・IEだとlocalStorage対応バージョンでも、あらかじめ設定をONにしていないと動かない。
(これも最初知らず、ハマりました)
・IEではローカル環境ではlocalStorageが動作しない。サーバーに設置してから。
推奨されない書き方
var value = localStorage["key"]; localStorage["key"]= var value;
このような書き方をするサンプルも多いですが、基本的には推奨されません。きちんとgetItem("text")
と書くのが正しい。
【超重要】
HTML5 の仕様では、localStorage にオブジェクトを突っ込めるそうですが、ブラウザによっては実装できないことが多い。そのためOpera、Chromeでは問題なく実装できても、Firefox、IEではうまくいかないことも。
オブジェクトを代入する場合、一度文字列に変換してからストレージをセットするのがよいらしい。
たとえば日時をセットする場合
localStorage.setItem("date_time", (new Date()).toString()); //保存日時
localStorage役立ちリンク
その他localStorageのお勉強に役立ちそうなリンク
第14回HTML5とか勉強会
[JavaScript][HTML5][localStorage]localStorageの挙動と簡単なラッパー – but hopeful
ブラウザ別、localStorage の削除に関わる所作 :WEB 職人