2011年06月01日

localStorageはいい感じ

今日のネタは、HTML5で規定されているlocalStorage(ローカルストレージ)についてです。
以下、特徴をいくつか挙げてみます。

2011/07/06 イベントについて追記





ローカルにデータを保存します


PCやスマートフォンなどの端末にデータを保存します。
別のサイトに行こうが、ブラウザを閉じようが、データが残っています。
localStorageの使い方としては、キャッシュ的な使い方が良さそうです。
「サーバーからデータを取得してlocalStorageに格納しておく。次にアクセスしたときはlocalStorageから取得する。もしなければサーバーに取りに行く。」
って感じで。
サーバーに取りに行かなくて済むなら処理が早くなってハッピーですね。
所詮はローカルのデータなので、データが存在することを前提にしてはいけません。





モダンなブラウザなら大概使えます


IE8以上、FireFox、Chrome、Safariなど、有名なブラウザなら対応しています。
androidやiOSなどのスマートフォンのブラウザでもOKです。
ぶっちゃけ、IE7とかIE6が癌ってことですね。
早く絶滅してくんねーかな。

IEだとlocalStorageをオンに設定してないと動きません。
筆者の環境だと、気づいたときはオフでした。
まさかデフォルトでオフ!?
以下のような感じで、インターネットオプションを設定してください。
IEのlocalStorage設定

もう一つ、IEについて注意。
IEでローカルのHTMLファイルを直接実行した場合(つまりエクスプローラでHTMLファイルをダブルクリックして実行した場合)、localStorageオブジェクトを取得できないようです。
つまりlocalStorageを使えません。
きちんとWebサーバー経由で実行すれば問題ありません。
プログラミング→動作確認の流れが面倒になりますね。





同一ドメイン原則が適用されます


JavaScriptでアクセスするので同一ドメイン原則が適用されます。
例えば、
www.example.com/test.html
から
www.yahoo.co.jp/index.html
のlocalStorageにアクセスできません。
要するに、他人様のサイトのデータにはアクセスできません。

でも同一ドメイン内なら別のページでもOKです。
test1.htmlでlocalStorageに格納したデータを、test2.htmlで取得したりできます。
ページ間でデータを引き渡すのに使えますね。
対応してないブラウザを切り捨てる、という前提でですが…。

※追記
xAuthやiframeなどを使ってクロスドメインで同一localStorageにアクセスできるみたいです。
ただ、少し敷居が上がっちゃうみたい。
やろうと思えばできる、くらいの認識で。





保存容量はいかほどなの?


HTML5の仕様では、特に保存容量の上限は決まってないようです。
「ブラウザの実装に任せるよ」って話です。
cookieみたいに数千バイトまで、ってケチくさい量ではないのでそんなに気にすることもないかもしれません。
普通のサイトがインターネット経由でやり取りするデータなら問題ないと思います。





連想配列みたいにアクセスできます


localStorageの基本的な使い方
//格納する
localStorage.setItem(key, value);
localStorage.key = value; //←推奨されません
localStorage["key"] = value; //←推奨されません

//取得する
var value = localStorage.getItem(key);
var value = localStorage.key; //←推奨されません
var value = localStorage["key"]; //←推奨されません

//キーを列挙する
for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
}

//1件削除する
localStorage.removeItem(key);

//全部削除する
localStorage.clear();


localStorage.keyとかlocalStorage["key"]みたいに、まさにJavaScriptっぽくアクセスできます。
が、これらの書き方だとブラウザ間で微妙に動作が異なるらしく…。
現時点だとおとなしくgetItem()、setItem()を使うほうが良さそうな雰囲気です。

また、上記のコードでvalueは文字列じゃないとダメです(現時点では)。
HTML5の仕様ではオブジェクトOKとなってるので、そのうちブラウザ側で対応してくれるでしょう。
「今まさにオブジェクトで格納したいんだよゴラ!!!」って人はJSONに直して格納すると血圧が下がるかもしれません。

JSONに直して格納
//オブジェクトからJSONに直して格納する
localStorage.setItem(key, JSON.stringify({"hoge": "fuga"}));

//JSONからオブジェクトに直して取得する
var value = JSON.parse(localStorage.getItem(key));






イベント


ローカルストレージが変更されたというイベントを受け取ることができます。
setItem()、removeItem()、clear()を実行したときにイベントが発行されます。
この機能は、ローカルストレージが変更されたことを「他のページ」に伝えます。
自分自身(イベントを発行したページ)には伝わりません。

デモを作ってみました。
以下の二つのページを両方とも開いてみてください。
イベントを発行するページ
イベントを受け取るページ

大雑把なコードはこんな感じです。
jQueryを使っています。
jQueryを使わない場合はaddEventListener関数を使ってください。

ローカルストレージ変更のイベント
//イベントを発行するページ
localStorage.setItem("key", "value");

//イベントを受け取るページ
$(window).bind("storage", function (event) {
alert(
//変更前の値
"oldValue:" + event.originalEvent.oldValue + "\n" +
//変更後の値
"newValue:" + event.originalEvent.newValue + "\n" +
//イベントを発行したページのURL
"url:" + event.originalEvent.url + "\n" +
変更されたアイテムのキー
"key:" + event.originalEvent.key + "\n" +
//ローカルストレージ全体
"storageArea:" + event.originalEvent.storageArea
);
});






今後、localStorageはガリガリ使われることになりそうです。
おいしく召し上がりたいですね。




タグ:javascript HTML5
posted by ぺるたご at 01:01| Comment(29) | TrackBack(1) | 日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
онлайн. Low price of http://onlinebestprice2016.com/ sildenafil citrate online prices and regular pharmacy prices?, High quality service and low prices for sildenafil citrate 100mg http://buyedtabletsonline24-7.com/ , an effective treatment, at greatly reduced prices, View specials coming from first-rate pharmacies where you can cialis brand http://cgeneric3onlinec.com/ keep them away from direct sunlight., providersPreventing errors is your responsibility when you cialis no prescription http://conline3buyc.com/ ., You know the price of cialis sale http://cbuy3onlinec.com/ Online pharmacies are a great way to !
Posted by VvgerbtdtQW at 2017年01月29日 11:52

Appreciate it! It is an awesome website. ’
Posted by FrcjqhNY at 2017年02月20日 04:30

I adore this site - its so usefull and helpfull. ’
Posted by AynifsWA at 2017年02月20日 04:40

I delight in the data on your web site. Many thanks. ’
Posted by BkvqojCK at 2017年02月27日 19:39

You've one of the better sites. ’
Posted by Vbkqoo at 2017年02月27日 22:48
<a href="http://usa4cialedc.com/">cialis online</a>

Hi excellent website! Does running a blog like this require a great deal of work? I have very little understanding of computer programming but I was hoping to start my own blog in the near future. Anyway, if you have any suggestions or techniques for new blog owners please share. I understand this is off topic but I just had to ask. Cheers! ’ http://usa4cialedc.com/
Posted by SfhlxqLS at 2017年03月21日 21:15
<a href="http://generic4menjlc.com/">tadalafil 20 mg</a>

Many thanks! This a great website. ’ http://generic4menjlc.com/
Posted by ZwjxpqUL at 2017年03月22日 23:41
same day payday loans ’ https://tgswfastcashloans.com/ pay day loans
Posted by ZljyzltyRG at 2017年05月02日 06:55
Posted by WigxkbEG at 2017年05月04日 00:15
bad credit payday loans ’
https://sampaydaylendersapprovedcash.org/
Posted by pvbvb at 2017年05月04日 06:04
Posted by at 2017年05月04日 06:11
Posted by sqvvq at 2017年05月06日 06:14
Posted by at 2017年05月07日 01:32
Posted by AervbatheTM at 2017年05月12日 07:34
payday day loans
<a href="https://zxepersonalloansonlinesmall.com/">cash advance online</a>
online payday advance
<a href="https://zxepersonalloansonlinesmall.com/">instant payday loans</a> ’
Posted by at 2017年05月13日 06:05
best online payday loans - https://zxepersonalloansonlinesmall.com/
payday advance loan <a href="https://zxepersonalloansonlinesmall.com/">cash advance</a> ’
Posted by at 2017年05月13日 06:06
online personal loans - https://www.lericashadvanceonlineloan.com/
instant payday loans <a href="https://www.lericashadvanceonlineloan.com/">online loans</a> ’
Posted by LbgbbatheHT at 2017年05月15日 06:06
Posted by LnolbatheBM at 2017年05月15日 06:06
loans - https://www.ljeionlinecashadvancefast.com/
direct lender payday loans <a href="https://www.ljeionlinecashadvancefast.com/">cash advances</a> ’
Posted by at 2017年05月15日 07:23
online payday loan - https://www.getispaydayloansonline.com/
fast payday loan <a href="https://www.getispaydayloansonline.com/">easy loans</a> ’
Posted by at 2017年05月15日 07:33
online payday loans direct lenders - https://paydayloanxwer.com/
quick cash loans <a href="https://paydayloanxwer.com/">fast loans</a> ’
Posted by LbmnbatheVD at 2017年05月16日 02:58
online personal loans - https://personalloansxjil.org/
easy personal loan <a href="https://personalloansxjil.org/">best personal loans</a> ’
Posted by at 2017年05月16日 04:09
payday loans online - https://cashadvancemuil.com/
best online payday loans <a href="https://cashadvancemuil.com/">cash advance loan</a> ’
Posted by at 2017年05月16日 04:11
fast payday loan - https://badcreditbert.com/
payday loans bad credit <a href="https://badcreditbert.com/">bad credit payday loans</a> ’
Posted by BvgfbatheOX at 2017年05月17日 00:45
small loans - https://badcreditnyrc.org/
same day payday loans <a href="https://badcreditnyrc.org/">online payday loans</a> ’
Posted by BbtrbatheCV at 2017年05月17日 23:30
installment loans online - https://personalloansxjil.org/
installments loans <a href="https://personalloansxjil.org/">installment loans for poor credit</a> ’
Posted by at 2017年05月22日 21:17
payday loans online - https://cashbadvance.org/
cash advance loans online <a href="https://cashbadvance.org/">cash advance inc</a> ’
Posted by DbasbatheLI at 2017年05月24日 06:21
cialis online - http://genericialisfesonline.com/
cialis <a href="http://genericialisfesonline.com/">buy cialis</a> ’
Posted by at 2017年05月24日 07:38
online payday loans no credit check - https://paydayloansonlinergc.org/
cash express <a href="https://paydayloansonlinergc.org/">cash advance lenders</a> ’
Posted by GdcbatheYE at 2017年05月28日 06:30
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

HTML5 で作る iPhone ローカル Web アプリ入門
Excerpt: さて、まず「ローカル Web アプリ」ってなんぞっていう話ですが、Web ベースの技術で作られブラウザからサーバにアクセスして利用するものの、いったんロードが完了したら、それ以降はネットワーク接続不要..
Weblog: OTCHY.NET
Tracked: 2011-11-22 13:39
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。