Cookies and jQuery 在jquery中使用cookies,你需要一个插件Cookie plugin.
Setting cookies 用Cookie plug-in设置cookies是很直观的: 复制代码 代码如下: $(document).ready(function(){
// Setting a kittens cookie, it will be lost on browser restart: $.cookie("kittens","Seven Kittens");
// Setting demoCookie (as seen in the demonstration): $.cookie("demoCookie",text,{expires: 7, path: '/', domain: 'demo.tutorialzine.com'});
// "text" is a variable holding the string to be saved });
Reading cookies 读取cookie甚至更简单,只需要调用$.cookie()方法,给它一个cookie-name就可以了,这个方法会返回cookie的值: 复制代码 代码如下: $(document).ready(function(){
// Getting the kittens cookie: var str = $.cookie("kittens");
// str now contains "Seven Kittens" });
Deleting cookies 删除cookie,只需要在次使得$.cookie()方法,把第二个参数设置为null就可以了。 复制代码 代码如下: $(document).ready(function(){
// Deleting the kittens cookie: var str = $.cookie("kittens",null);
// No more kittens });
完整例子: demo.php 复制代码 代码如下: // Always set cookies before any data or HTML are printed to the page $visited = (int)$_COOKIE['pageVisits'] + 1; setcookie( 'pageVisits', // Name of the cookie, required $visited, // The value of the cookie time()+7*24*60*60, // Expiration time, set for a week in the future '/', // Folder path, the cookie will be available for all scripts in every folder of the site 'demo.tutorialzine.com'); // Domain to which the cookie will be locked ?>
MicroTut: Getting And Setting Cookies With jQuery & PHP | Tutorialzine demo
MicroTut: Getting And Setting Cookies With jQuery & PHP
The number above indicates how many times you've visited this page (PHP cookie). Reload to test.
Write some text in the field above and click Save. It will be saved between page reloads with a jQuery cookie.
jquery.cookie.js 复制代码 代码如下: /** * Cookie plugin * * Copyright (c) 2006 Klaus Hartl (stilbuero.de) * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * */ /** * Create a cookie with the given name and value and other optional parameters. * * @example $.cookie('the_cookie', 'the_value'); * @desc Set the value of a cookie. * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true }); * @desc Create a cookie with all available options. * @example $.cookie('the_cookie', 'the_value'); * @desc Create a session cookie. * @example $.cookie('the_cookie', null); * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain * used when the cookie was set. * * @param String name The name of the cookie. * @param String value The value of the cookie. * @param Object options An object literal containing key/value pairs to provide optional cookie attributes. * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object. * If a negative value is specified (e.g. a date in the past), the cookie will be deleted. * If set to null or omitted, the cookie will be a session cookie and will not be retained * when the the browser exits. * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie). * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie). * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will * require a secure protocol (like HTTPS). * @type undefined * * @name $.cookie * @cat Plugins/Cookie * @author Klaus Hartl/klaus.hartl@stilbuero.de */ /** * Get the value of a cookie with the given name. * * @example $.cookie('the_cookie'); * @desc Get the value of a cookie. * * @param String name The name of the cookie. * @return The value of the cookie. * @type String * * @name $.cookie * @cat Plugins/Cookie * @author Klaus Hartl/klaus.hartl@stilbuero.de */ jQuery.cookie = function(name, value, options) { if (typeof value != 'undefined') { // name and value given, set cookie options = options || {}; if (value === null) { value = ''; options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE } // CAUTION: Needed to parenthesize options.path and options.domain // in the following expressions, otherwise they evaluate to undefined // in the packed version for some reason... var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } else { // only name given, get cookie var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i var cookie = jQuery.trim(cookies[i]); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } };
styles.css 复制代码 代码如下: *{ margin:0; padding:0; } body{ /* Setting default text color, background and a font stack */ color:#555555; font-size:0.825em; background: #fcfcfc; font-family:Arial, Helvetica, sans-serif; } .section{ margin:0 auto 60px; text-align:center; width:600px; } .counter{ color:#79CEF1; font-size:180px; } .jq-text{ display:none; color:#79CEF1; font-size:80px; } p{ font-size:11px; padding:0 200px; } form{ margin-bottom:15px; } input[type=text]{ border:1px solid #BBBBBB; color:#444444; font-family:Arial,Verdana,Helvetica,sans-serif; font-size:14px; letter-spacing:1px; padding:2px 4px; } /* The styles below are only necessary for the styling of the demo page: */ h1{ background:#F4F4F4; border-bottom:1px solid #EEEEEE; font-size:20px; font-weight:normal; margin-bottom:15px; padding:15px; text-align:center; } h2 { font-size:12px; font-weight:normal; padding-right:40px; position:relative; right:0; text-align:right; text-transform:uppercase; top:-48px; } a, a:visited { color:#0196e3; text-decoration:none; outline:none; } a:hover{ text-decoration:underline; } .clear{ clear:both; } h1,h2,p.tutInfo{ font-family:"Myriad Pro",Arial,Helvetica,sans-serif; }