【JQuery】cookieの発行、取得、削除を行う

公開日：
更新日：
カテゴリー: JQuery

javascriptでcookieの発行、取得、削除は少々面倒ですが、jQueryのプラグイン「jquery.cookie」を使えば容易かつ簡単にcookie操作が可能になります。

jquery.cookieの取得と設定

jQueryのプラグイン「jquery.cookie」はこちらから取得可能です。

右サイドバーの一番下に「Download ZIP」というボタンがありますので、そこからZIPファイルをダウンロードしてください。

ダウンロードしたらそのZIPファイルにある「jquery.cookie.js」ファイルをサーバー（のルートディレクトリか任意の場所）にアップロードし、サイトのヘッダーに読み込みのためのタグを挿入してください。

<script type="text/javascript" src="http://○○○.com/jquery.cookie.js"></script>

なお、初めてjQueryを使う場合、次のようにjQuery本体も一緒に挿入してください（jQuery本体を上にする）。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="http://○○○.com/jquery.cookie.js"></script>

jquery.cookieの操作

cookieの保存

cookieの保存は、次のようにします。

$.cookie('ここにcookieの名前', '保存したい値');

cookieの有効期限を指定

通常、cookieの有効期限はブラウザが閉じられるまでですが、次のようにすると有効期限を設定できます。

$.cookie('保存したいcookieの名前', '保存したい値', { expires: 365 });

上の例だと365日間保存でき、下のようにすると一週間（7日間）保存できます。

$.cookie('保存したいcookieの名前', '保存したい値', { expires: 7 });

 また、小数で指定すると時間単位、秒単位で指定可能です。

cookieの有効範囲を指定

cookieの有効範囲も指定できます。

$.cookie('保存したいcookieの名前', '保存したい値', { expires: 1 , path: '/' });

この場合、cookieの有効範囲はドメイン全体となり、次のようにすると「test」ディレクトリ以下で有効となります。

$.cookie('保存したいcookieの名前', '保存したい値', { expires: 1 , path: '/test/' });

この場合、cookieの有効範囲はドメイン全体となり、次のようにすると「test」ディレクトリ以下で有効となります。

cookieの取得

ブラウザに保存されたcookieは、次のようにして取り出せます。

$.cookie('取得したいcookieの名前');

引数に取り出したいcookieの名前を指定すると、その値を取り出せます。

利用しているすべてのcookieを取得

利用しているすべてのcookieを取得する場合、次のようにします。

$.cookie();

戻り値は、次のようなオブジェクト（連想配列）となります。

{ "name1":"value1", "name2":"value2", ・・・ }

cookieの削除

cookieの削除を行う場合、次のようにします。

$.removeCookie('削除したいcookieの名前');

ただし、cookieの保存時に使われた属性も指定しなければなりません。

つまり、

$.cookie('保存したいcookieの名前', '保存したい値', { expires: 1 , path: '/test/' });

のように保存した場合、次のようにしなければなりません。

$.removeCookie('削除したいcookieの名前', { path: '/test/' });

json形式でcookieを操作する

json形式のデータでcookieを扱いたい場合、次の宣言文を記述する必要があります。

$.cookie.json = true;

URIエンコードとURIデコードをオフにする

デフォルトではcookieの発行と取得ではURIエンコードとURIデコードが行われますが、それらの処理をオフにする場合、次の宣言文を記述する必要があります。

$.cookie.raw = true;

その他オプション設定も可能ですので、ダウンロードページの仕様を確認すると良いと思います。

jquery.cookieを使ってcookieを操作する

「jquery.cookie」を使って、cookieの発行・取得・削除を行うサンプルを作ってみました。

デモがあるので操作できているか確認してみてください。デモはこちら。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>デモ</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script src="jquery.cookie.js"></script>
    <script type="text/javascript">
      <!--
	$(function(){
		//cookieを保存する
		$('#cookie_save').click(function(){
			//有効期限1日、有効範囲はドメイン全体のcookie「test_cookie」を発行
			$.cookie('test_cookie', 'これはテストのために発行されたcookieです。', { expires: 1, path: '/' });
		});
		//cookieを取得する
		$('#cookie_get').click(function(){
			//cookie「test_cookie」を取得
			var cookie_get = $.cookie('test_cookie');
			//取得したcookieをid要素「cookie_output」に出力する
			$('#cookie_output').text(cookie_get);
		});
		//cookieを削除する
		$('#cookie_delete').click(function(){
			//cookie「test_cookie」の削除
			$.removeCookie('test_cookie', { path: '/' });
		});
	});
      //-->
    </script>
  </head>
  <body>
     <p><input type="button" value="cookieの発行" id="cookie_save" ></p>
     <p><input type="button" value="cookieの取得" id="cookie_get" ></p>
     <div id="cookie_output"></div>
     <p><input type="button" value="cookieの削除" id="cookie_delete" ></p>
  </body>
</html>

オブジェクト（連想配列）のcookieを操作する

「jquery.cookie」を使って、オブジェクト形式のcookieの発行・取得・削除を行うサンプルを作ってみました。

こちらもデモを準備しています。デモはこちら。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>デモ</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script src="jquery.cookie.js"></script>
    <script type="text/javascript">
      <!--
	$(function(){
		//オブジェクト（連想配列）のcookieを扱うので宣言
		$.cookie.json = true;
		//オブジェクトのcookieを発行する
		$('#cookie_json_save').click(function(){
			//cookie用のオブジェクトを作成
			var cookie_object = {apple:"りんご", orenge:"みかん", banana:"ばなな"};

			//有効期限1日、有効範囲はドメイン全体のcookie「test_cookie_json」を発行
			$.cookie('test_cookie_json', cookie_object, { expires: 1, path: '/' });
		});
		//オブジェクトのcookieを取得する
		$('#cookie_json_get').click(function(){
			//cookie「test_cookie_json」を取得
			var cookie_object_get = $.cookie('test_cookie_json');
			//オブジェクトのcookieデータをループで取得
			for(key in cookie_object_get){
				//取得したcookieをid要素「cookie_output」に出力する
				$('#cookie_output').append(cookie_object_get[key]);
			}
		});
		//オブジェクトのcookieを削除する
		$('#cookie_json_delete').click(function(){
			//cookie「test_cookie」の削除
			$.removeCookie('test_cookie_json', { path: '/' });
		});
	});
      //-->
    </script>
  </head>
  <body>
     <p><input type="button" value="cookieの発行" id="cookie_json_save" ></p>
     <p><input type="button" value="cookieの取得" id="cookie_json_get" ></p>
     <div id="cookie_output"></div>
     <p><input type="button" value="cookieの削除" id="cookie_json_delete" ></p>
  </body>
</html>

 

あわせて読んでほしい！

　


管理人プロフィール

今年（2017年）の3月に7年間勤めた公務員を退職して現在ニートしているアホです。ニート歴5か月目に突入！ﾔﾊﾞｲ

【経歴】

  1. 公立高校
  2. 国立大学
  3. 国立大学大学院（専門は生物化学領域）
  4. 公務員
  5. ニート（今ここ）
  6. ？？？

【一言】
（公務員やめた後悔は正直）ある

管理人の似顔絵
ココナラでＪＫに似顔絵描いてもらいました

関連してそうなオススメ記事

【Ajax】サーバーにあるファイル（データ）を指定の要素に出力する
【Ajax】PHPにデータをPOST or GET送信し、結果を取得して処理する
【JQuery】主なソーシャルボタンをサイトに一括設置する方法
【JQuery】CSSを変更する方法
【JQuery】処理待ち中にアニメーション表示する
【JQuery】配列の要素を一定間隔の時間を空けて出力する方法

コメント

まだコメントはありません。

コメントフォーム
お名前
コメント