HTML5で実装されたAPIの一つである、Web Storageについて。
HTML5について
そもそもHTML5とは何か。
現行のHTMLのバージョンのことで、その大きな特徴は、様々なAPIが実装されたこと。
これまでのように文書作成だけに主眼を置くのではなく、ウェブアプリケーションを作成するための様々な機能が実装されている。
HTMLは元々、文書の作成や公開のために設計されたものだった。
そのため、必ずしもアプリケーションの作成に最適化されたものではなかったが、創意工夫によって、何とかウェブアプリケーションを作ってきた。
そのへんの背景については、この本が分かりやすく、面白かった。
「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか
しかしHTML5では、文書設計のための機能だけでなく、ウェブアプリケーション開発のための様々な機能が用意されている。
そのため、従来のHTMLに比べて、ウェブアプリケーションが開発しやすくなっている。
今回勉強するWeb Storageも、HTML5で実装された機能の一つである。
なお、各機能のブラウザ対応状況は、このページで確認できる。
Web Storageは、現在主流となっているブラウザならどれでも問題なく機能するようだ。
Web Storageの概要
Web Storageを使うと、ユーザーのローカル環境、つまりブラウザにデータを保存することが出来る。
クッキーに似ているが、クッキーよりも大きなデータを扱うことが出来る。
しかも、クッキーと違ってサーバーに送信されることがない。
Web Storageには、sessionStorageとlocalStorageの2種類がある。
sessionStorageはタブ単位に保存されるストレージで、タブを閉じると失われる。
そのため、一時的なデータの利用に使われる。
localStorageは、意図的に削除しない限り、永続的に保存されるストレージ。
オリジン単位で保存されるため、異なるタブ間でも共有される。
オリジン、というのはよく分からなかったが、「同じドメイン」と理解しておけば問題ないようだ。
そのため、同じドメインなら、異なるページや異なるタブからでも同じストレージを参照できる。
異なるドメイン同士が衝突してしまうという心配もない。
Web Storageの使い方
Web Storageが持っているメソッドやプロパティは、以下の通り。
| メソッドとプロパティ | 内容 |
|---|---|
| length | 保存されているデータの数を返す |
| key(n) | 保存されているn番目のkeyを返す |
| getItem(key) | keyに対応するvalueを取得する |
| setItem(key, value) | keyとvalueのペアでデータを保存する |
| removeItem(key) | keyに対応するvalueを削除する |
| clear() | データをすべてクリアする |
例
var st = localStorage; st.setItem('userId', 10); var result = st.getItem('userId'); console.log(result); // 10 st.clear(); result = st.getItem('userId'); console.log(result); // null
例2
setItemとgetItemは、以下のように書き換えることも出来る。
var st = localStorage; st.userId = 33; console.log(st.userId); //33
イベント
ストレージに何らかの変更を加えると、storageイベントが発生する。
このため、ストレージへの変更を感知することが出来る。
ただ、このイベントは、複数のタブで情報を共有するためのものらしく、変更を行ったタブではイベントは発生しない。
この仕組みについては、他サイトのこのサンプルが分かりやすかった。
上記のページを複数タブで開き、片方のタブでリロードを繰り返しカウントを増やす。
その状態のままもう一方のタブを見ると、特に何もしなくても、こちらのタブのカウントも増えていることが確認できる。
参考
Web Storage－HTML5のAPI、および、関連仕様
十四章第一回 Storage — JavaScript初級者から中級者になろう
