jQueryを使ったCookieの書き込み・読み込み・削除のサンプルコード
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