localStorageまとめと注意事項 ITかあさん

ITかあさん

localStorageまとめと注意事項

HTML5 APIの一種であるlocalStorage。実際に使ってみたところ、各ブラウザ間で挙動が異なったりで戸惑うことが多かったので、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にて実装することが可能。
これにより、IE7以前や、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役立ちリンク

その他localStorageのお勉強に役立ちそうなリンク
第14回HTML5とか勉強会
[JavaScript][HTML5][localStorage]localStorageの挙動と簡単なラッパー – but hopeful
ブラウザ別、localStorage の削除に関わる所作 :WEB 職人

初夏のJavaScript祭 in サーキュレーションビル ForPro