[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/

シェアする

  • このエントリーをはてなブックマークに追加

フォローする