JavaScript
jQuery
TypeScript

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

More than 3 years have passed since last update.

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