[Cookie・WebStorage]ブラウザにデータを保存する

ブラウザにデータを保存する方法は3つある。

• Cookie
• sessionStorage
• localStorage

それぞれの特徴は下表。

	別ウィンドウでのデータ共有	有効期限	データ量上限	サーバへのデータ送信
Cookie	◯	指定した期限まで有効	4KB	サーバアクセスするたびに自動送信
sessionStorage	☓	ウィンドウやタブを閉じるまで有効	1オリジンあたり5MB	必要時のみ送信
localStorage	◯	永続的に有効	1オリジンあたり5MB	必要時のみ送信

【参考文献】
▼Web Storage
http://www.htmq.com/webstorage/

1. Cookieの実装

jQueryプラグイン「jquery.cookie.js」が便利。
事前にjQueryとjquery.cookie.jsを読み込んでおく。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

▼Cookieの保存

$.cookie('KEY（キー）', 'VALUE（値）', {オプション});

• オプション
  • expires：有効期限（日数）
  • path：有効なパス（ドメイン全体で利用したい場合は’/’を設定）
  • domain：有効なドメイン
  • secure：HTTPS接続の場合のみにcookieを送信(デフォルトはfalse)

▼Cookieの取得

$.cookie('KEY（キー）');

▼Cookieの削除

$.removeCookie('KEY（キー）');

[実装例] TypeScript、moment.jsを使った実装例は下記。

if ($.cookie('HOGE_KEY') == undefined) {
  var expiration:Date = moment().endOf('day').toDate();
  $.cookie('HOGE_KEY', 'HOGE_VALUE', {expires: expiration}); // クッキーの期限は日付の変わり目（午前0時）
}

• Cookieが入っていない時、取り出そうとするとundefined
• JavaScriptで日付を扱うならMoment.jsが便利。
• moment.jsを使うには、<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>を読み込んでおく。

【参考文献】
▼jQueryプラグイン「jquery.cookie.js」でcookieを簡単に扱う
http://www.tam-tam.co.jp/tipsnote/javascript/post3109.html

2. sessionStorageの実装

▼sessionStorageの保存

window.sessionStorage.setItem('KEY（キー）', 'VALUE（値）');

▼sessionStorageの取得

window.sessionStorage.getItem('KEY（キー）');

▼sessionStorageの削除

window.sessionStorage.removeItem('KEY（キー）');

3. localStorageの実装

▼localStorageの保存

window.localStorage.setItem('KEY（キー）', 'VALUE（値）');

▼localStorageの取得

window.localStorage.getItem('KEY（キー）');

▼localStorageの削除

window.localStorage.removeItem('KEY（キー）');

【参考文献】
▼Web Storage
http://www.htmq.com/webstorage/