HOME / WEB関連知識のスキルアップ / HTMLクイック･リファレンス / HTML5のAPI、および、関連仕様  > Web Storage

★Web Storage

| ​​Web Storageとは
Web Storageは、ユーザーのローカル環境（ブラウザ）にデータを保存するための仕組みです。 データの保存・上書き・削除・全クリアなどの操作は、JavaScriptで行うことができます。
Web Storageを利用すると、ユーザーごとにカスタマイズされた情報を提供することが可能となります。 この仕組みはクッキー（HTTP cookie）とよく似ていますが、クッキーに比べて保存できる容量が大きいため、 例えば、オフラインでもウェブアプリケーションを動作させられるだけの 必要十分なデータをユーザーのローカル環境に保存することなどが可能となります。
Web Storageには、sessionStorageとlocalStorageの２種類のストレージが用意されています。 どちらもキー（key）と値（value）をペアにしたデータのリストを ユーザーのローカル環境に保存するkey-value型のデータ保存形式である点は同じですが、 データの有効期限などが異なるので目的に応じて使い分けます。
  別ウィンドウでの
データ共有		 データの
有効期限		 データ量
の上限		 サーバーへの
データ送信
クッキー ○ 指定期限まで有効 4KB サーバーへアクセスするたびに毎回自動送信
sessionStorage × ウィンドウやタブを閉じるまで有効 1オリジン当たり5MB 必要時のみスクリプトやフォームなどで送信
localStorage ○ 永続的に有効

| sessionStorageは、一回限りのセッションで有効なストレージ
sessionStorageは、ウィンドウやタブ単位での一回限りのセッションで有効なストレージです。 ウィンドウやタブが開いている間のみデータが保存され、閉じるとデータが失われます。 同じドメインのサイトを別々のウィンドウで開いている場合には、それぞれが別のsessionStorageとなります。 クッキーとは異なり、ウィンドウ間でデータが共有されることはありません。
sessionStorageを利用する一例を挙げてみます。 例えば、2つのウィンドウで同じサイトを開きながら航空券を注文する場合、 クッキーでは買い物かご情報が混在してしまって、同じフライトのチケットを気づかずに2枚注文してしまう可能性があります。
sessionStorageでは、それぞれが別のセッションとなるため、 別ウィンドウの買い物かご情報が混在してしまうことがありません。

| localStorageは、オリジン単位でデータを永続的に保存するストレージ
localStorageは、オリジン単位でデータを永続的に保存するストレージです。 オリジンとは、「http://www.example.com:80」のような「プロトコル://ドメイン名:ポート番号」のことです。 オリジンが同じであれば別ウィンドウでもデータを共有でき、ブラウザを終了してもデータは失われません。 データ保存量の上限はブラウザへの推奨値が1オリジン当たり5MBとされており、 クッキーの4KBに比べるとより大きなデータを保存できるようになっています。
localStorageを利用する一例を挙げてみます。 例えば、ウェブメールにおけるメールの送受信データのような比較的大きなデータの場合、 クッキーでは保存できるデータ量に上限があるため、すべてのデータをローカル環境に保存することは困難です。 また、クッキーではユーザーがアクセスする度にデータがサーバーに送信されるため、セキュリティの観点からも好ましくありません。
localStorageでは、ローカル環境に5MBまでのデータを永続的に保存でき、 ユーザーのアクセスの度にデータがサーバーに送信されることがありません。 ウェブメールの例で言えば、localStorageなら送受信データをローカル環境に保存でき、 オフラインウェブアプリケーションと組み合わせることで、オフラインでのメール閲覧なども可能となるでしょう。

| Web Storageで指定できる命令
Web Storageで指定できる命令は、データの保存・保存したデータの取得・指定キーの値削除・全クリアのいずれかです。 それぞれの命令を指定するメソッドは以下の通りです。 メソッド・属性は、sessionStorageとlocalStorageで共通となります。
getItem(key) …… keyに対応するvalueを取得する
setItem(key, value) …… keyとvalueをペアにしてデータを保存する
removeItem(key) …… keyに対応するvalueを削除する
clear() …… データをすべてクリアする
Web Storageのメソッド・属性の一覧
利用しているサーバーで .htaccess が使用できるなら、 以下の一行を追加すると拡張子「.manifest」のMIMEタイプがtext/cache-manifestであることを指定できます。

JavaScriptソース

//変数storageにsessionStorageを格納
var storage = sessionStorage;

//useridというキーに1111という値を割り当てて保存
storage.setItem('userid', '1111');

//後からvalueを変更してセットし直せば上書き保存される
storage.setItem('userid', '2222');

//useridというキーの値を取得する（2222が返るはず）
storage.getItem('userid');

//useridというキーの値を削除する
storage.removeItem('userid');

//ストレージに保存されているデータをすべてクリアする
storage.clear();
尚、上のサンプルではsessionStorageとしてデータを保存していますが、 「sessionStorage」の部分を「localStorage」に変えれば localStorageとしてデータが保存されます。

| Web Storageのイベント
sessionStorageとlocalStorageにデータの追加・上書き・削除・全クリアなどの 何らかの更新をするとstorageというイベントが発生します。 storageイベントには、以下の属性が用意されています。
属性名返り値
key更新されたkey
oldValue更新されたkeyの古いvalue
newValue更新されたkeyの新しいvalue
urlkeyが更新された文書のURL
storageArea更新によって影響を受けたStorageオブジェクト

| Web Storageのサンプル　ソース

​HTML + JavaScriptソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=utf-8>
<script>
//変数storageにsessionStorageを格納
var storage = sessionStorage;

//データを保存する
function set() {
  var k = document.getElementById("k").value;
  var v = document.getElementById("v").value;
  storage.setItem(k, v);
  show_result();
}

//データをクリアする
function cle() {
  storage.clear();
  show_result();
}

//保存されているデータをリスト表示する
function show_result() {
  var result = "";
  //保存されているデータの数だけループ
  for(var i=0; i<storage.length; i++){
    //i番目のキーを取得
    var k = storage.key(i);
    //キーと値をコロン（：）区切りのテキストにする
    result += k + "：" + storage.getItem(k) + "<br>";
  }
  //上のループで作成されたテキストを表示する
  document.getElementById("show_result").innerHTML = result;
}
</script>
<title>Web Storage　サンプル</title>
</head>
<body>
<p>
キー：<input id="k" type="text">
値：<input id="v" type="text">
<input type="button" value="ストレージに保存" onClick="set()">
</p>
<p>
<div id="show_result"></div>
<input type="button" value="ストレージをクリア" onClick="cle()">
</p>
</body>
</html>
サンプルを別画面で開く

| Web Storageのメソッド・属性
Web Storageには、以下のメソッド・属性が用意されています。

ストレージインターフェース　The Storage interface

length …… 保存されているデータの数を返す
key(n) …… 保存されているn番目のkeyを返す
getItem(key) …… keyに対応するvalueを取得する
setItem(key, value) …… keyとvalueのペアでデータを保存する
removeItem(key) …… keyに対応するvalueを削除する
clear() …… データをすべてクリアする
http://www.w3.org/TR/webstorage/#the-storage-interface

| JavaScriptでアプリケーションキャッシュを扱う
JavaScriptのAPIを利用することで、アプリケーションキャッシュをより詳細に制御することができます。 アプリケーションキャッシュAPIで、現在のところ指定できる命令は以下の2つのメソッドです。
cache . update() …… キャッシュのダウンロードを実行する
cache . swapCache() …… 最新のキャッシュに置換する
キャッシュマニフェストのメソッド・属性の一覧

| applicationCacheで定義されている7つのイベント
キャッシュに関する動作がどのような状況にあるかは、以下の7つのイベントで取得します。 それぞれのイベント発生時の動作をスクリプトで指定することで、 ユーザーに対してより高度なインターフェースを提供することができるでしょう。
イベント名イベントが発生するタイミング
checkingユーザーエージェントがキャッシュマニフェストをチェックしているとき
noupdateキャッシュマニフェストに変更が無かったとき
downloadingユーザーエージェントがキャッシュするファイルをダウンロードしているとき
cachedキャッシュするファイルのダウンロードが完了してキャッシュしたとき
updateready新しくキャッシュし直すファイルのダウンロードが完了して、新しいキャッシュに置換するためにswapCache()メソッドを使用する準備ができたとき
obsoleteキャッシュしたファイルがすでに存在しなくなり、キャッシュの削除が完了したとき
errorエラーが発生したとき

| JavaScriptでアプリケーションキャッシュを扱う　サンプル

HTML + JavaScriptソース

<!DOCTYPE HTML>
<html manifest="sample.manifest">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>キャッシュマニフェストの指定あり</title>
</head>
<body>
<p><img src="kaeru.gif" alt="カエル"></p>
<div id="joukyou"></div>
<script>
var joukyou = document.getElementById("joukyou");
window.applicationCache.addEventListener("checking", function () {
  joukyou.innerHTML += "<br>更新をチェック中...";
}, false);
window.applicationCache.addEventListener("noupdate", function () {
  joukyou.innerHTML += "<br>更新はありません";
}, false);
window.applicationCache.addEventListener("downloading", function () {
  joukyou.innerHTML += "<br>ダウンロード中...";
}, false);
window.applicationCache.addEventListener("cached", function () {
  joukyou.innerHTML += "<br>キャッシュしました";
}, false);
window.applicationCache.addEventListener("error", function () {
  joukyou.innerHTML += "<br>エラーが発生しました";
}, false);
</script>
<input type="button" onclick="window.applicationCache.update()" value="キャッシュを更新する">
</body>
</html>

キャッシュマニフェストの指定内容

CACHE MANIFEST
index.html
style.css
kaeru.gif
サンプルを別画面で開く
anchor: ma

| オフライン ウェブ アプリケーションのメソッド・属性
JavaScriptでキャッシュを扱う仕様として、以下のメソッド・属性が用意されています。

 ブラウザの状態　Browser state

window . navigator . onLine …… ユーザーエージェントがオンラインかどうかを返す（true・false）