jQueryを使ったCookieの書き込み・読み込み・削除のサンプルコード - モバイル通信とIT技術をコツコツ勉強するブログ

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