ITコラム

jquery cookie

jQuery

2018.10.23

jQuery【 cookie 】データを保持するクッキーの使用方法

cookie( クッキー ) とは、ブラウザにデータを保持する機能です。
今回は、jQuery で cookie を利用する際の方法について紹介します。

目次

1.jquery.cookie.js を用意
2.cookie データを保持・取得・削除

1.jquery.cookie.js を用意

 
データを一時保持する cookie を使用するために、次の何れかの方法で jquery.cookie.js というライブラリを用意します。
 

jquery.cookie.js ファイルをダウンロードして用意する方法

jquery.cookie.js ファイルをダウンロードして用意する場合は、GitHub のサイトから ファイルをダウンロードして 任意の場所に保存し、次のように読み込みます。

<script type="text/javascript" src="保存場所/jquery.cookie.js"></script>

 

jquery.cookie.js の CDN を利用する方法

jquery.cookie.js の CDN を利用する場合は、次のように記述して jquery.cookie.js ファイルを直接読み込んで利用します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

こちらから最新バージョンをご確認下さい。

▲目次へ戻る

 

2.cookie データを保持・取得・削除

 
cookie を使用して、データをリセット時まで保持します。
カウントボタンを何度かクリックした後、ブラウザをリロードしてみて下さい。
また、リセットボタンもクリックしてみて下さい。

【cookie有】カウント:
【cookie無】カウント:

 

 
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<script type="text/javascript">
<!--
$(function() {

  var cookie = $.cookie("cookie1");    
  if(cookie){
    $("#spn1").text(cookie);
  } else {
    $("#spn1").text(0);
  }
  $("#spn2").text(0);

  var num1 = $("#spn1").text();
  var num2 = 0;

  $("#btn1").on("click", function(){
    num1++;
    num2++;
    $.cookie("cookie1", num1);
    $("#spn1").text(num1);
    $("#spn2").text(num2);
  });

  $("#btn2").on("click", function(){
    num1 = 0;
    num2 = 0;
    $.removeCookie("cookie1");
    $("#spn1").text(num1);
    $("#spn2").text(num2);
  });

});
//-->
</script>

<div style="background-color:#CCC; padding:20px 20px 2px;">
  【cookie有】カウント:<span id="spn1"></span>
  【cookie無】カウント:<span id="spn2"></span>
  <input type="button" id="btn1" value="カウント">
 <input type="button" id="btn2" value="リセット">
</div>

cookie にデータを保持

「 $.cookie(“cookie1”, num1); 」のように記述して、cookie にデータを保持します。
保持しておく値を第 2 引数に指定し(上のサンプルでは変数の「 num1 」)、第 1 引数には 保持しているデータに名前を付けて指定します(上のサンプルでは「 “cookie1” 」)。
これで、変数 num1 の値が “cookie1” という名前のデータとして保持されている状態となります。

cookie からデータを取得

「 $.cookie(“cookie1”); 」のように記述すると、cookie で保持しているデータを取得することができます。
cookie にデータを保持させる際に命名したデータの名前を指定して、取得するデータを特定します。
上のサンプルでは、この記述で 変数 num1 の値を取得することができます。

cookie のデータを削除

「 $.removeCookie(“cookie1”); 」のように記述すると、cookie で保持していたデータが削除されます。
cookie にデータを保持させる際に命名したデータの名前を指定して、削除するデータを特定します。
上のサンプルでは、この記述で “cookie1” と命名したデータが丸ごと削除されます。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.