特定のCookieの値を表示させるスクリプトのメモ【JS】

JavaScriptでCookieを簡単に扱う方法として、jQueryプラグインのjQuery Cookieというのがあります。 それを使ってセットされた特定のCookieの値を表示させようとしたのですが、うまくいかず(僕のやり方がまずいのだけかもしれませんが)、 jQueryを使わずにJavaScriptで行うことにしました。その値を表示させるスクリプトのメモです。

といいつつもCookieの削除の記述はjQuery Cookieを用いたほうがシンプルなので、その記述をし、全体的なスクリプトもjQueryで書いています。

jQueryとjQuery Cookieをセット

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>

Cookieの取得

var allcookies = document.cookie;

上記の記述だとブラウザに書き込まれたすべてのCookieを取得してしまうため、特定のCookieのみ取得の場合はindexOf()を用います。 なお、Cookieを取得するときは、[Cookie名]=[値]の形となります。下記では、hogehogeがCookie名となっています。

特定のCookieの取得

var allcookies = document.cookie;
var cookie = allcookies.indexOf("hogehoge=");

Cookieの値を抜き取る

上記のスクリプトで特定のCookieを取得したので、値のみを抜き取ります。まずは「hogehoge=」以降の値を取得するので、最初と最後までを抜き取り、 そして最後はunescapeをします。

if(cookie != -1){
	var start = cookie + 9;//最初
	var end = allcookies.indexOf(";", start);//最後
	if(end == -1) end = allcookies.length;
	var value = allcookies.substring(start, end);
	value = unescape(value);
}

これで一応特定のCookieの値を取得することができますので、あとはどのように表示するなりの処理を書いていけばよいです。すべてを合体【謎】させると下記のようになります。

$(function(){
	var cookieName = "hogehoge";
	var allcookies = document.cookie;
	var cookie = allcookies.indexOf("hogehoge=");
	
	if(cookie != -1){
		var start = cookie + 9;
		var end = allcookies.indexOf(";", start);
		if(end == -1) end = allcookies.length;
		var value = allcookies.substring(start, end);
		value = unescape(value);
		
		//何か特定の文字列を含んでいた場合の処理だと
		if(value.match(/foo/gi)){
			//なんかの処理
		
		
        
		$.cookie(cookieName, null, { path:'/'}); //なんかの処理が終わってCookieの削除をする場合
        }
	}
});

関連