Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 5 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/

sirok
プッシュ通知サービス Growth Pushやその他 グロースハックツールを開発・運営するスタートアップ
http://sirok.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away