jquery.cookieをつかう・・

らら
らら

はじめに

昔からよく使っている。。jquery.cookieです・・

別件で使う予定なので、書いてみました・・

HTTP cookie(cookie)とは・・・

RFC 6265などで定義されたHTTPにおけるウェブサーバとウェブブラウザ間で状態を管理する通信プロトコル、またそこで用いられるウェブブラウザに保存された情報のことを指します。

ユーザーIDとか。パスワードとか生ものは入れないようにしましょう。。セッションIDとか、カートIDとかにしましょう・・・

jquery.cookieの説明

クッキーの読み取り、書き込み、削除のためのシンプルで軽量なjQueryプラグイン

下記からダウンロード

https://github.com/carhartl/jquery-cookie

jQueryを使用せず、ES対応は、下記から

https://github.com/js-cookie/js-cookie

下記から。github翻訳です・・

呼び出し方法

jQueryライブラリの後に、スクリプトを設置します。


<script src="/path/to/jquery.cookie.js"></script>

使い方

セッションクッキーを作成します。


$.cookie('name', 'value');

7日後の期限付きのCookieを作成します。


$.cookie('name', 'value', { expires: 7 });

サイト全体で有効な期限付きのCookieを作成します。


$.cookie('name', 'value', { expires: 7, path: '/' });

クッキーの読み取り:


$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined

利用可能なすべてのクッキーを読む:


$.cookie(); // => { "name": "value" }

クッキーの削除:


// Returns true when cookie was successfully deleted, otherwise false
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false
// Need to use the same attributes (path, domain) as what the cookie was written with
$.cookie('name', 'value', { path: '/' });
// This won't work!
$.removeCookie('name'); // => false
// This will work!
$.removeCookie('name', { path: '/' }); // => true

注:クッキーを削除するときは、デフォルトのオプションに依存していない限り、クッキーの設定に使用されたのとまったく同じパス、ドメイン、および安全なオプションを渡す必要があります。

コンフィグレーション

raw

デフォルトでは、Cookie値は、/を使用して書き込み/読み取り時にエンコード/デコードされます。 rawをtrueに設定してこれをバイパスします：encodeURIComponentdecodeURIComponent


$.cookie.raw = true;

json

クッキー値として渡されたJSONオブジェクトの自動保存を有効にします。仮定し、 :JSON.stringifyJSON.parse


$.cookie.json = true;

クッキーオプション

Cookie 属性は、オブジェクトのプロパティを設定することによってグローバルに設定することも、options 引数にプレーンオブジェクトを渡すことによって呼び出しごとに個別に設定することもできます。呼び出しごとのオプションは、既定のオプションよりも優先されます。

デフォルト


$.cookie.defaults$.cookie()

expires


expires: 365

クッキーの有効期間を定義します。値は、作成時またはオブジェクトからの日数として解釈されるaにすることができます。省略した場合、クッキーはセッションクッキーになります。NumberDate

path


path: '/'

クッキーが有効なパスを定義します。デフォルトでは、クッキーのパスはクッキーが作成されたページのパスです(標準的なブラウザの動作)。たとえば、ドメイン全体で使用できるようにする場合は、 を使用します。デフォルト: クッキーが作成されたページのパス。path: '/'

インターネットエクスプローラに関する注意:

基になる WinINET InternetGetCookie 実装のあいまいなバグのため、IE の document.cookie は、ファイル名を含むパス属性で設定されている場合、クッキーを返しません。

(Internet Explorer Cookie Internals (FAQ) より))

これは、そのようなパス名に次のようなファイル名が含まれている場合(または少なくとも、そのようなクッキーを正しく読み取ることができない)を使用してパスを設定することができないことを意味します。path: window.location.pathname/check.html

domain


domain: 'example.com'

クッキーが有効なドメインを定義します。デフォルト: クッキーが作成されたページのドメイン。

secure


secure: true

true の場合、クッキーの送信には安全なプロトコル (https) が必要です。デフォルト：false

コンバーター

Cookieの値をその場で別の表現に変更するために、読み取り用のオプションの最後の引数として変換関数を提供します。

値を数値に解析する例:


$.cookie('foo', '42');
$.cookie('foo', Number); // => 42

（サードパーティのCookie）を使用してエンコードされたCookieの処理：escape


$.cookie.raw = true;
$.cookie('foo', unescape);

任意の変換関数を渡すことができます。

サンプル

Cookieをrawで保存するのが・・・あれなので‥

jsonでやってます・・・


<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(function () {
	$.cookie.json = true;
	var cookie_id = "mypage"
	var cookie_value ={url: ""};
	var cookie_date = new Date();
	cookie_date.setTime(cookie_date.getTime() + ( 365 * 24 * 60 * 60 * 1000 ));
	//期間を伸ばす・・
	if(typeof $.cookie(cookie_id) !== 'undefined') {
		cookie_value = getcookie_parse();
		$.cookie(cookie_id, JSON.stringify(cookie_value), { expires: cookie_date, path: '/' });
	}
	$('#reg').on('click', function() {
		cookie_value = getcookie_parse();
		cookie_value.url = location.href;
		$.cookie(cookie_id, JSON.stringify(cookie_value), { expires: cookie_date, path: '/' });
	});
	$('#del').on('click', function() {
		cookie_value = getcookie_parse();
		cookie_value.url="";
		$.cookie(cookie_id, JSON.stringify(cookie_value), { expires: cookie_date, path: '/' });
	});
	function getcookie_parse() {
		var cookie_value = {url: ""};
		if(typeof $.cookie(cookie_id) !== 'undefined') {
			cookie_value = JSON.parse($.cookie(cookie_id));
		}
		return cookie_value;
	}
	cookie_value = getcookie_parse();
	alert(cookie_value.url);
});
</script>
<input type="button" id="reg" value="登録">
<input type="button" id="del" value="削除">

フォントサイズのやつ‥

こっちは、生・・


<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
	var cookie_date = new Date();
	cookie_date.setTime(cookie_date.getTime() + ( 365 * 24 * 60 * 60 * 1000 ));
	if(typeof $.cookie(cookie_id) !== 'undefined') {
		cookie_value = $.cookie(cookie_id);
		$.cookie(cookie_id, cookie_value, { expires: cookie_date, path: '/' });
	}
	var cookie_id	= "fontsize";
	var sizetarget	= "#target";
	var large_size	= "20pt";
	var middle_size	= "16pt";
	var small_size	= "10pt";
	$(function () {
		change_fontsize();
		$("#font_large").click(function () {
			change_fontsize(large_size);
		});
		$("#font_middle").click(function () {
			change_fontsize(middle_size);
		});
		$("#font_small").click(function () {
			change_fontsize(small_size);
		});
	});
	function change_fontsize(size) {
		if (size === undefined) {
			size = $.cookie(cookie_id);
			if (size === undefined) {
				size = middle_size;
			}
		}
		$(sizetarget).css("font-size", size);
		$.cookie(cookie_id, size,  { expires: cookie_date, path: '/' });
	}
</script>
<input type="button" value="大" id="font_large" />
<input type="button" value="中" id="font_middle" />
<input type="button" value="小" id="font_small" />
<div id="target">漢字テスト</div>

さいごに・・

ファーストパーティクッキー（1st Party Cookie）では、クッキーバナーの同意はいりませんよ・・

知ってるって‥...

IEもなくなって・・jqueryの意味もなくなってきましたが・・・簡単なものは便利ですよね。。やっぱり・・・

jqueryはクロスブラウザで、同じ記述ができて、ブラウザー依存無く、記述できましたが・・

jquery、React、Vue.jsとか・・用途に合わせて使うのがいいですよね。。

関連記事