2013/08/09

cookieに代わるHTML5新機能!容量ケタ違いのWeb Storageとは

HTML5新機能!知らなきゃ損するWeb Storage

旧来は顧客のログイン情報、入力情報、ショッピングサイトのカート情報などのデータはブラウザのcookieに保存してきましたが、HTML5ではcookieに変わる新機能としてWeb Storageが追加されました。

今回はそのWeb Storageについて詳しく説明していきます。

目次

■cookieとWeb Storageの違い

cookieとWeb Storageの違い

今までPCにデータを残しておく時には、主にcookieを使ってました。

cookieの特徴

  • ・一つのサイトで20個まで
  • ・一つにつき4Kバイトまで
  • ・サーバーにデータを自動で送信する
  • ・有効期限あり

というように容量と期限に制限がありセキュリティも決して高くない状態でした。

HTML5ではcookieに変わる新機能としてWeb Storageが追加されました。

Web Storageの特徴

  • ・個数の制限なし
  • ・容量は一つのオリジン(*注1)につき2~5Mバイトまで
  • ・サーバーにデータを自動で送信しない
  • ・有効期限なし

cookieのかゆいところに手が届く、まさにcookieの進化版といったようなAPIです。

(*注1)...オリジンとは「http://www.hp-stylelink.com/:80」のような「プロトコル://ドメイン名:ポート番号」のことです。

cookieとWeb Storageの機能の比較

機能比較 cookie Web Storage
個数制限 20個まで 制限なし
容量 4Kバイト 2~5Mバイト
有効期限 あり なし
自動送信 する しない

■Web Storageの種類

Web Storageの種類

Web Storageは、sessionStoragelocalStorageの二種類があります。

sessionStorage

  • ・現在のウインドのタブだけで有効。
  • ・タブが閉じられた時にデータを消去。

使用例:最初のアクセスの時だけトップページにオープニング画面を表示させてフラグを立てる。 その後はオープニング画面を省略してトップページを表示する、など。

localStorage

  • ・違うウインドやタブで同じ情報を共有できる。
  • ・サイトごとにストレージが用意され永続的にデータを保持する。

使用例:ユーザーのログイン情報や設定情報などをlocalStorageに記録しておいて、ユーザーに毎回入力してもらう手間を省く、など。

それぞれ有効範囲が違うだけで基本的な使用方法は同じです。
キー(key)と値(value)を対にして使います。

■Web Storageのサンプルコード

HTMLクイックリファレンスがとても分かりやすかったのでそちらをご紹介します。

このコードはキーを指定してストレージにデータを保存します。

同じキーを指定すれば書き換えになりますし、違うキーを指定すればデータの追加になります。

<!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のメソッドについて解説をします。

7行目 sessionStorageをlocalStorageに変えればlocalStorageとして使えます。
13行目 setItem(key, value) ...... keyとvalueのペアでデータを保存する
19行目 clear() ...... データをすべてクリアする
27行目 length ...... 保存されているデータの数を返す
29行目 key(n) ...... 保存されているn番目のkeyを返す
31行目 getItem(key) ...... keyに対応するvalueを取得する

このサンプルのようにWeb Storageは短いコードで簡単に扱う事ができます。

■Web Storageを使っているサイト

アマゾン
この商品を買った人はこんな商品も買っています」のページ番号をsessionStorageで保存しています。

アマゾン

the Shodo
初回実行時に動作するムービーの閲覧情報フラグをsessionStorageで持っていて、音量設定やミュート設定の保存にlocalStorageを使用しています。

the Shodo

■まとめ

この二つのWeb Storageは今後なくてはならない機能になると思います。
簡単に使えてとても役に立つ機能なので覚えておいて損はないでしょう。