読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

jQueryを使ったCookieの書き込み・読み込み・削除のサンプルコード

jquery

jquery.cookie.jsというプラグインを使えばよい。

以下は動作サンプルページ。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery test</title>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
	<!-- http://stackoverflow.com/questions/9115278/is-jquery-cookies-hosted-on-the-google-cdn -->

<script>

// Cookie名と値をグローバルで定義
var cookie_name  = "jquery_cookie_test_name";
var cookie_value = "jquery_cookie_test_value";


// 書き込みボタン押下時
function func_write_cookie(){
	$.cookie( cookie_name, cookie_value, { expires : 7 });
		// http://blog.syuhari.jp/archives/445
}


// 読み込みボタン押下時
function func_read_cookie(){
	alert( $.cookie( cookie_name ) );
}


// 削除ボタン押下時
function func_remove_cookie(){
	$.removeCookie( cookie_name );
		// http://iwb.jp/jquery-cookie-delete/
}


// ロード時
$(function(){

	// ボタンにイベントをセット

	$("#aaa").on( "click", function(){
		func_write_cookie();
	});

	$("#bbb").on( "click", function(){
		func_read_cookie();
	});

	$("#ccc").on( "click", function(){
		func_remove_cookie();
	});

});

</script>
</head>
<body>

<h1>jQueryを使ったCookieの書き込み・読み込み・削除のサンプルコード</h1>

<input type="button" id="aaa" value="書き込み"><br>
<input type="button" id="bbb" value="読み込み"><br>
<input type="button" id="ccc" value="削除"><br>



</body>
</html>

初期状態で読み込みを押しても,undefinedと表示される。

書き込みを押してから,読み込みを押すと,Cookieに書き込んだ値がちゃんと表示される。

削除を押してから,読み込みを押すと,Cookieに書き込んだ値が消えているので,再度undefinedとなる。


Cookieに値がある状態で,ブラウザをいったん閉じて,またHTMLを開き直してみる。

読み込みボタンを押すと,Cookieの有効期限内であれば,値がちゃんと表示される。


jqueryでCookieを読み書きする方法について:

jQuery でクッキーを扱う方法 | Sun Limited Mt.
http://blog.syuhari.jp/archives/445


jquery.cookie.jsのCookie(クッキー)を削除する3つの方法 | iwb.jp
http://iwb.jp/jquery-cookie-delete/

  • $.removeCookie(“hoge”)
  • $.cookie(“hoge”, null )
  • $.cookie(“hoge”, “”, {expires: -1})


Is jquery.cookies hosted on the Google CDN? - Stack Overflow
http://stackoverflow.com/questions/91...


jsDelivr - Free CDN for javascript libraries, jQuery plugins, CSS frameworks, Fonts and more
http://www.jsdelivr.com/#!jquery.cookie


解決編!!Google Chrome Cookie expires(有効期限)バグ | 真夜中に奔る
http://5key.jugem.jp/?eid=111

  • Google Chromeはクッキーのexpiresが省略されると挙動がおかしくなるという話


JavaScriptでcookieを操作する時はjquery.cookie.jsを使おう - 文殊堂
http://d.hatena.ne.jp/monjudoh/200807...


jquery.cookie.jsを使用していますが | JavaScriptのQ&A【OKWave】
http://okwave.jp/qa/q6311735.html


jQuery Cookieプラグインの保存期間を1時間や30分にする方法 | iwb.jp
http://iwb.jp/jquery-cookie-savehours/


javascript - remove Cookie using jquery not working - Stack Overflow
http://stackoverflow.com/questions/18...


$.removeCookie(cookieName) · Issue #68 · carhartl/jquery-cookie · GitHub
https://github.com/carhartl/jquery-co...


テスト時の注意点:

Google Chromeはローカル環境でクッキーを作らない | 広島のホームページ制作会社 株式会社GOWEB
http://goweb.jp/blog/2011/05/27/1497/

html5のひな型とjqueryの埋め込みについて:

HTML5でマークアップしてみよう−HTML5リファレンス
http://www.htmq.com/html5/003.shtml


HTML5 × CSS3 × jQueryを真面目に勉強 – #14 jQuery UI Widget(プラグイン)の作り方について詳しく | Developers.IO
http://dev.classmethod.jp/ria/html5/h...


HTML4から変化したHTML5のマークアップ ここが違う!サンプルで見るHTML5(2) (1/3):CodeZine
http://codezine.jp/article/detail/5600


jQueryライブラリなどの CDN 指定方法 - A Memorandum
http://etc9.hatenablog.com/entry/2012...


jQuery Core – All Versions | jQuery CDN
http://code.jquery.com/jquery/


Latest jQuery version on Google's CDN - Stack Overflow
http://stackoverflow.com/questions/12...

発端になった質問:

jQueryでCookieを使って削除したいです。 それで、jsの初めの行..
http://q.hatena.ne.jp/1387970220