【JS】【HTML5】Web Storage (ウェブ ストレージ)

HTML

■ はじめに

 クライアント側にデータを保存したい場合、クッキーがある
しかし、以下の関連記事
http://blogs.yahoo.co.jp/dk521123/28437833.html
で書いたように、容量が少ない。
～～～～
 * Cookie の有効・無効の設定はブラウザで行うことができる
 * ブラウザでは 最低 300 個のクッキー（RFC2109 より）
  => これを超えると古い方から削除される
 * 一つのクッキーあたり最低 4096 バイト（RFC2109 より）
 * 個々のホストもしくはドメイン名ごとに最低 20 個のクッキー（RFC2109 より）
～～～～
そこで、HTML5から導入された「Web Storage (ウェブ ストレージ)」について、調べてみる。

■ 特徴/利点

 * データ保存容量 : 5MByte～(クッキー数KBより大容量)
 * キー単位では無制限
 * データを利用する時のみサーバ側へ送信(クッキーよりはセキュアに利用でき、ネットワーク負荷が軽い)

■ Web Storageの種類

1) localStorage

 * ブラウザ内に永続的にデータを保存するストレージ
 * データの有効期限なし
 * 「オリジン(origin)単位(※)」の単位で保存

※オリジンは、「プロトコル(例:http)＋ドメイン(例:blogs.yahoo.co.jp)＋ポート番号(例:80)」で識別される

2) sessionStorage

 * ウィンドウごとのセッションで有効なストレージ
  => ウィンドウ／タブ間では、データ共有できない
  => ウィンドウ／タブが閉じられると、データは失われる

■ 注意点

実装上での注意点

 1) 機密情報を極力保管しない方がいい
 2) (同じPCで複数ユーザが使用する場合を想定して)キーを、ユーザ識別情報と共に保存する
(1)の参考文献
http://www.atmarkit.co.jp/ait/articles/1309/05/news042_2.html
(2)の参考文献
http://d.hatena.ne.jp/hasegawayosuke/20130308/p1

ブラウザ設定上での注意点

 * 結構多かったので、以下の関連記事にまとめた。
http://blogs.yahoo.co.jp/dk521123/35669004.html

■ サンプル

http://dev.classmethod.jp/references/webstrorage_favorite-condition/
を参考に、検索条件（今回はテキストボックスのみ）の保存を試みる 
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src="">http://code.jquery.com/jquery-1.10.1.min.js">
</head>
<body>
<div id="message"></div>
<form id='searchConditionForm'>
<table>
<tbody>
<tr>
 <td>テキストボックス</td>
 <td>
 <input name='textData' id='textData' type='text'/>
 </td>
</tr>
</tbody>
</table>
<input id='buttonSeach' type='submit' value='Seach' onClick="saveSearchCondition()" /><br/>
</form>
<script type="text/javascript">
// キーを、ユーザ識別情報と共に保存する
var SavingKey = 'userId001' + 'searchData';

$(function() {
  // ローカルストレージの利用可否確認
  if(!localStorage) {
    document.getElementById('message').innerText = 'ローカルストレージが使えないです';
    return;
  }
  // ローカルストレージからデータを取り出し
  var searchData = localStorage.getItem(SavingKey);
  if (searchData) {
    searchDataset = JSON.parse(searchData);
    $('#textData').val(searchDataset.textData);
  }
});

function saveSearchCondition() {
  var searchDataset = new Object();
  searchDataset.textData = $('#textData').val();
  
  localStorage.setItem(SavingKey, JSON.stringify(searchDataset));
}
</script>
</body>
</html>
発展版は以下の関連記事を参照のこと。
http://blogs.yahoo.co.jp/dk521123/35656214.html

■ 構文

 * 簡単に使用できる

Web Storageオブジェクトの取得

var 【保存していた値】 = localStorage.getItem('【キー】');

保存

localStorage.setItem('【キー】', 【保存する値】);

削除

localStorage.removeItem('【キー】');

イベント

ストレージ情報に関する操作を実施した際のイベント
タブ内、複数のタブ内など、それぞれのWeb Storageの範囲内で通知 
window.addEventListener("storage", function(evt) {
  console.log(evt.key + " " + evt.oldValue + " => " + evt.newValue);
})

参考文献

http://www.atmarkit.co.jp/ait/articles/1108/12/news093.html
* すっきりまとまっている
http://www.tohoho-web.com/html5/web_storage.html
http://www.spiceworks.co.jp/blog/?p=5658
http://dev.classmethod.jp/ria/html5/p19676/
* 文法
http://www.shurey.com/js/labo/WebStorage.html
* サンプル
http://dev.classmethod.jp/references/webstrorage_favorite-condition/
* 注意点
http://perutago.seesaa.net/article/206013819.html
http://lab.informarc.co.jp/html/webstorage.html
http://www.kaasan.info/archives/925
http://d.hatena.ne.jp/hasegawayosuke/20130308/p1
http://d.hatena.ne.jp/hasegawayosuke/20130310/p1
* イベント
http://www.atmarkit.co.jp/ait/articles/1108/12/news093_3.html

関連記事

その他のウェブ ストレージ関連

* Web Storage を、使いやすくする
http://blogs.yahoo.co.jp/dk521123/35656214.html
* Web Storage (ウェブ ストレージ) でのトラブル
http://blogs.yahoo.co.jp/dk521123/35669004.html

クッキー関連

* 【Web開発】クッキー（Cookie）
http://blogs.yahoo.co.jp/dk521123/28437833.html
* 【ASP.NET】クッキー（Cookie）
http://blogs.yahoo.co.jp/dk521123/28439642.html