ブラウザにデータを保存する方法は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/