|
HTML5＋CSS3 |
HTML5編
|
| Lesson 14 | 新機能の使用方法(6) Web Storage |
|||
| 制作・文 | 加茂雄亮（株式会社ロクナナ） |
| Web StorageはW3Cで策定が進められているAPIの一つである。主な目的はCookieと同様、ローカルディスク上に 一時データを保存するものだ。Cookieとの主な違いは、「有効期限」と「データサイズ」の緩和である。 |
Web Storageと
Cookieの違い
Web Storageはローカルディスク上に一時データを保存する。基本的な目的はCookieと同じだが、保存されるデータの「有効期限」と「サイズ」に大きな違いがある【1】。
【1】サイズについてはブラウザごとに上限が設定される予定なので注意が必要だが、Cookieよりはるかに多くのデータを格納することができる
LocalStorageと
SessionStorage
Web Storage の仕様には、LocalStorageとSessionStorageがある【2】。永続的にデータを保存する場合は LocalStorageを、ブラウザが開いている間の一時的なデータの保存でよい場合はSessionStorage を使用する。Session Storageはウィンドウごとにデータを保持している。そのためデータを保存したウィンドウとは違うウィンドウでデータを参照することはできない。JavaScriptではwindow.localStorage、およびwindow.sessionStorage を利用する。使い方に関しては両者とも同様のメソッドと機能をもつ。違いはデータ保存に関する規定のみだ。
【2】
フォームで入力された内容を
LocalStorageに保存する
ユーザーがフォームに入力した内容をLocalStorageに保存する場合、input 要素に対してchange イベントを登録するのが便利だ。input要素でなんらかの変更があった場合にイベントが発行され、イベントハンドラが実行される。ハンドラ内ではlocalStorage.setItemメソッドを利用。第一引数には引き出す際に必要となるキーを、第二引数には保存するオブジェクトを指定する【3】。
【3】
保存されたデータの
呼び出しと削除
LocalStorage 上のデータを呼び出すにはlocalStorage.getItem メソッドを使うか、[] 演算子を利用して直接参照することも可能だ。LocalStorage とSessionStorage はIE6 ／7 をのぞく、ほとんどのモダンブラウザで実装されているが、一部のブラウザではLocalStorageのイテレーションができず、for in などで走査することができない。このため、保存しているキーを配列として指定しておき、forで走査して参照している。データの呼び出しをページの読み込み時に行うことで、前回のデータの上書きが実現できる【4】【5】。
保存されているデータの削除には、キーを指定して直接値を削除することもできるが、localStorage.clearメソッドを利用しよう。
【4】
【5】
SessionStorageの
挙動
LocalStorageでは、データは永続的に 保存され、明示的に削除しなければ消えることはない。では、SessionStorageではどうだろうか。挙動を確認するために、上記のソースをsessionStorage に置き換えてみた【6】。置き換えは非常に簡単で、localStorage をsessionStorage に書き換えるだけでよい。ブラウザでstorage.htmlを開き値を入力する【7】。入力は即座にストレージに保存されることになる【8】。
しかし、別のウィンドウでもう一つstorage.html を開いてみよう。
localStorage版ではしっかりと値は保持されるのだが、sessionStorageでは保持されておらず、デフォルトのままだ【9】【10】。
sessionStorageは、ウィンドウごとにデータが保持されているため、ウィンドウが切り替われば参照することはできないので注意する必要があるだろう。
【6】
【7】
【8】
【9】
【10】
＞＞目次に戻る
