データをローカル環境に保存して、やりとりするために、以前はCookieを使用していました。ですが、HTML5からはWebStorageを使用できることになりました。

WebStorage

「WebStorage（ウェブストレージ）」とは、データをブラウザ側で保存する機能です。
「WebStorage」は「cookie」よりも大容量で長期間の保存が可能になっています。

Web Storageにはセッションストレージとローカルストレージの2種類があります。

セッションストレージはウィンドウが開いている間は有効でウインドウが閉じられるとデータは破棄されます。ローカルストレージはウインドウを閉じても有効で自分のPC内に永続的に保存されます。

特徴または機能	クッキー	Web Storage
保存容量	4KBytes	5MBytes
データの有効期限	あり（無期限設定はない）	なし
セキュリティ	すべてのリクエストに対してサーバにデータを自動送信	データを利用する時のみ送信（自動で送信しない）
Web Storageとクッキーの機能の差異

Amazon.co.jp：　お勧め商品の一覧ページ「この商品を買った人はこんな商品も買っています」のページ番号をsessionStorageで保存している。

クッキーサンプル

http://alphasis.info/2014/03/javascript-sample-cookie-button/　より

実例
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

クッキーＡにセットする値：

クッキーＢにセットする値：

削除：
削除：

クッキーＡの値：

クッキーＢの値：

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

HTMLソース

<p>
     クッキーＡにセットする値：
     <button onclick="setCookie( 'cookieA-name', 'リンゴ', 1 );">リンゴ</button>
     <button onclick="setCookie( 'cookieA-name', 'バナナ', 1 );">バナナ</button>
</p>
<p>
     クッキーＢにセットする値：
     <button onclick="setCookie( 'cookieB-name', 'サッカー', 1 );">サッカー</button>
     <button onclick="setCookie( 'cookieB-name', '野球', 1 );">野球</button>
</p>
<p>
     削除：
     <button onclick="deleteCookie( 'cookieA-name' );">クッキーＡ</button>
     <button onclick="deleteCookie( 'cookieB-name' );">クッキーＢ</button>
</p>
<p>
     <button onclick="displayCookie( 'cookieA-name', 'cookieA-output' );displayCookie( 'cookieB-name', 'cookieB-output' );">クッキーの値を表示</button>
</p>
<p>
     クッキーＡの値：<span id="cookieA-output"></span>
</p>
<p>
     クッキーＢの値：<span id="cookieB-output"></span>
</p>

スクリプトソース

<script type="text/javascript">

// クッキーを設定する関数
function setCookie( $cookieName, $cookieValue, $days ){

     // Dateオブジェクトを生成
     var $dateObject = new Date();

     // クッキーの有効期限を示すDateオブジェクトを生成
     $dateObject.setTime( $dateObject.getTime() + ( $days*24*60*60*1000 ) );

     // 有効期限をグリニッジ標準時に変換
     // 有効期限をクッキーに設定するための文字列を、変数「$expires」に代入
     var $expires = "expires=" + $dateObject.toGMTString();

     // 有効期限付きでクッキーを設定
     document.cookie = $cookieName + "=" + $cookieValue + "; " + $expires;
}

// クッキーを取得する関数
function getCookie( $cookieName ){

     // 「;」区切りで分割し、配列「$cookies」に格納
     var $cookies = document.cookie.split(';');

     // クッキーの数だけループ
     for( var $i=0; $i < $cookies.length; $i++ ){

         // クッキーを「=」区切りで分割し、配列「$cookie」に格納
         var $cookie = $cookies[$i].trim().split( '=' );

         // クッキー名が仮引数「$cookieName」と同じであれば値を返す
         if( $cookie[0] == $cookieName ){
             return $cookie[1];
         }
     }
     return "";
}

// クッキーを削除する関数
function deleteCookie( $cookieName ){

     // 過ぎた有効期限を設定することで削除できる
     document.cookie = $cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; 
}

// クッキーデータを表示する関数
function displayCookie( $cookieName, $output ){

     // 仮引数「$cookieName」のクッキーの値を取得し、変数「$cookieValue」に格納
     var $cookieValue = getCookie( $cookieName );

     // 変数「$cookieValue」に格納したクッキーの値を表示
     document.getElementById( $output ).innerHTML = $cookieValue;
}
</script>

￥

HTML5でのWebStorage

10日で覚えるHTML5入門教室より

実例
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

HTMLソース

メモ帳

<form>
	タイトル：<input type="text" name="memoTitle" id="memoTitle" placeholder="タイトルを入れてください"><br>
	日　　付：<input type="text" name="memoDate" id="memoDate"><br>
	<textarea rows="5" cols="30" name="memoContents" id="memoContents" placeholder="内容を入れてください"></textarea>
	<br>
	<input type="button" id="saveButton" value="保存する">
	<input type="button" id="loadButton" value="保存したメモを読み出す">
</form>
<div id="status"></div>

スクリプトサンプル

if (typeof sessionStorage !== 'undefined') {
  // Web Storageに関する処理を記述
} else {
  window.alert("本ブラウザではWeb Storageが使えません");
}

// ページの読み込みが完了したら処理をする
window.addEventListener("load", function(){
//　今日の日付をテキストフィールドに設定
var dateObj = new Date();
var Y = dateObj.getFullYear();
var M = dateObj.getMonth() + 1;
var D = dateObj.getDate();
var dateString = Y+"年"+M+"月"+D+"日";
document.getElementById("memoDate").value = dateString;

// 結果を表示するための要素を変数に入れておく
var ele = document.getElementById("status");
// ローカルストレージが使えるかチェック
if (!window.localStorage){
ele.innerHTML = "ローカルストレージが使えるブラウザをご利用ください";
return;
}
// 「保存する」ボタンがクリックされた時の処理
document.getElementById("saveButton").addEventListener("click", function(){
var memo_title = document.getElementById("memoTitle").value;
var memo_date = document.getElementById("memoDate").value;
var memo_text = document.getElementById("memoContents").value;
window.localStorage.setItem("memoTitle", memo_title);
window.localStorage.setItem("memoDate", memo_date);
window.localStorage.setItem("memoData", memo_text);
ele.innerHTML = "内容を保存しました";
}, true);
// 「保存した内容を読み出す」ボタンがクリックされた時の処理
document.getElementById("loadButton").addEventListener("click", function(){
var memo_text = window.localStorage.getItem("memoData");
var memo_title = window.localStorage.getItem("memoTitle");
var memo_date = window.localStorage.getItem("memoDate");
if (memo_text == null){
ele.innerHTML = "保存されたメモはありません";
return;
}
document.getElementById("memoTitle").value = memo_title;
document.getElementById("memoDate").value = memo_date;
document.getElementById("memoContents").value = memo_text;
ele.innerHTML = "内容を読み出しました";
}, true);
}, true);