読者です 読者をやめる 読者になる 読者になる

ブラウザにデータを保存できるHTML5のAPI、Web Storageの基本

HTML5で実装されたAPIの一つである、Web Storageについて。

HTML5について

そもそもHTML5とは何か。
現行のHTMLのバージョンのことで、その大きな特徴は、様々なAPIが実装されたこと。
これまでのように文書作成だけに主眼を置くのではなく、ウェブアプリケーションを作成するための様々な機能が実装されている。

HTMLは元々、文書の作成や公開のために設計されたものだった。
そのため、必ずしもアプリケーションの作成に最適化されたものではなかったが、創意工夫によって、何とかウェブアプリケーションを作ってきた。
そのへんの背景については、この本が分かりやすく、面白かった。

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか

しかしHTML5では、文書設計のための機能だけでなく、ウェブアプリケーション開発のための様々な機能が用意されている。
そのため、従来のHTMLに比べて、ウェブアプリケーションが開発しやすくなっている。
今回勉強するWeb Storageも、HTML5で実装された機能の一つである。

なお、各機能のブラウザ対応状況は、このページで確認できる。

HTML5 & CSS3 Web Design

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イベントが発生する。
このため、ストレージへの変更を感知することが出来る。
ただ、このイベントは、複数のタブで情報を共有するためのものらしく、変更を行ったタブではイベントは発生しない。

この仕組みについては、他サイトのこのサンプルが分かりやすかった。

localStorageのサンプル

上記のページを複数タブで開き、片方のタブでリロードを繰り返しカウントを増やす。
その状態のままもう一方のタブを見ると、特に何もしなくても、こちらのタブのカウントも増えていることが確認できる。

参考

Web Storage-HTML5のAPI、および、関連仕様
十四章第一回 Storage — JavaScript初級者から中級者になろう