×

简单使用方法:

  1. <html>  
  2.    <head>  
  3.      <title>JQuery-Cookie插件</title>  
  4.      <script type="text/javascript" src="jquery-1.4.js"></script>  
  5.      <script type="text/javascript" src="jquery.cookie.js"></script>  
  6.    </head>  
  7.    <body>  
  8.      <a href="#">设置cookie1</a><br>  
  9.      <a href="#">设置cookie2</a><br>  
  10.      <a href="#">获取cookie</a><br>  
  11.      <a href="#">删除cookie</a><br>  
  12.    </body>  
  13. </html>  
  14. <script type="text/javascript">  
  15. $(function(){  
  16.      var COOKIE_NAME = ‘test_cookie’;  
  17.      //设置cookie,通过时间间隔  
  18.      $(‘a’).eq(0).click(function() {  
  19.          $.cookie(COOKIE_NAME, ‘test’, { path: ‘/’, expires: 1 });  
  20.          return false;  
  21.      });  
  22.      // 设置cookie,到期时间  
  23.      $(‘a’).eq(1).click(function() {  
  24.          var date = new Date();  
  25.          date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000));  
  26.          $.cookie(COOKIE_NAME, ‘test’, { path: ‘/’, expires: date });  
  27.          return false;  
  28.      });  
  29.      // 获取 cookie  
  30.      $(‘a’).eq(2).click(function() {  
  31.          alert($.cookie(COOKIE_NAME));  
  32.          return false;  
  33.      });  
  34.      // 删除cookie  
  35.      $(‘a’).eq(3).click(function() {  
  36.          $.cookie(COOKIE_NAME, null, { path: ‘/’ });  
  37.          return false;  
  38.      });  
  39. });  
  40. </script>

插件的源代码也很简单:

  1. jQuery.cookie = function(name, value, options) {  
  2.      if (typeof value != ‘undefined’) { // name and value given, set cookie
  3.           options = options || {};  
  4.          if (value === null) {  
  5.               value = ”;  
  6.               options.expires = -1;  
  7.           }  
  8.          var expires = ”;  
  9.          if (options.expires && (typeof options.expires == ‘number’ || options.expires.toUTCString)) {  
  10.              var date;  
  11.              if (typeof options.expires == ‘number’) {  
  12.                   date = new Date();  
  13.                   date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));  
  14.               } else {  
  15.                   date = options.expires;  
  16.               }  
  17.               expires = ‘; expires=’ + date.toUTCString();  
  18.           }  
  19.          var path = options.path ? ‘; path=’ + (options.path) : ”;  
  20.          var domain = options.domain ? ‘; domain=’ + (options.domain) : ”;  
  21.          var secure = options.secure ? ‘; secure’ : ”;  
  22.           document.cookie = [name, ‘=’, encodeURIComponent(value), expires, path, domain, secure].join(”);  
  23.       } else {  
  24.          var cookieValue = null;  
  25.          if (document.cookie && document.cookie != ”) {  
  26.              var cookies = document.cookie.split(‘;’);  
  27.              for (var i = 0; i < cookies.length; i++) {  
  28.                  var cookie = jQuery.trim(cookies[i]);  
  29.                  if (cookie.substring(0, name.length + 1) == (name + ‘=’)) {  
  30.                       cookieValue = decodeURIComponent(cookie.substring(name.length + 1));  
  31.                      break;  
  32.                   }  
  33.               }  
  34.           }  
  35.          return cookieValue;  
  36.       }  
  37. };

jQuery.cookie = function(name, value, options) {
    if (typeof value != ‘undefined’) { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = ”;
            options = $.extend({}, options); // clone object since it’s unexpected behavior if the expired property were changed
            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
        }
        // NOTE 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 < cookies.length; 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;
    }
};

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="Content-Style-Type" content="text/css">
        <meta http-equiv="Content-Script-Type" content="text/javascript">
        <title>jQuery Cookie Plugin</title>
        <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
        <script src="../../scripts/jquery.cookie.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                var COOKIE_NAME = ‘test_cookie’;
                var ADDITIONAL_COOKIE_NAME = ‘additional’;
                $(‘a’).eq(0).click(function() { // 用天数设置 cookie
                    $.cookie(COOKIE_NAME, ‘test’, { path: ‘/’, expires: 10 });
                    return false;
                });
                $(‘a’).eq(1).click(function() { // 用日期设置 cookie
                    var date = new Date();
                    date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000));
                    $.cookie(COOKIE_NAME, ‘test’, { path: ‘/’, expires: date });
                    return false;
                });
                $(‘a’).eq(2).click(function() { // 获取 cookie
                    alert($.cookie(COOKIE_NAME));
                    return false;
                });
                $(‘a’).eq(3).click(function() { // 删除 cookie
                    $.cookie(COOKIE_NAME, null, { path: ‘/’ });
                    return false;
           &
nbsp;    });
                $(‘a’).eq(4).click(function() { // 设置第二个 cookie
                    $.cookie(ADDITIONAL_COOKIE_NAME, ‘foo’, { expires: 10 });
                    return false;
                });
                $(‘a’).eq(5).click(function() { // 获取第二个 cookie
                    alert($.cookie(ADDITIONAL_COOKIE_NAME));
                    return false;
                });
                $(‘a’).eq(6).click(function() { // 删除第二个 cookie
                    $.cookie(ADDITIONAL_COOKIE_NAME, null);
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <p>
            <a href="#">设置 cookie (设置有效期天数为 10 天)</a><br>
            <a href="#">设置 cookie (通过 date 对象设置过期日期为 3 天后的那天)</a><br>
            <a href="#">获取 cookie</a><br>
            <a href="#">删除 cookie</a><br>
            <a href="#">设置另一个 cookie</a><br>
            <a href="#">获取另一个 cookie</a><br>
            <a href="#">删除另一个 cookie</a>
        </p>
    </body>
</html>

发表评论

您的电子邮箱地址不会被公开。

作者

constraint@sina.com

相关文章

混沌工程(Chaos Engineering)

最近在看SLA,看到里面一个词叫混沌工程,故...

读出全部

微信小程序分享朋友圈和转发朋友

体验版已支持iOS和android,只是微信...

读出全部

如何理解多租户架构?(转)

  1.什么是多租户架构?  2.多租户架构...

读出全部

大屏设计中echart 地图柱状图 饼状图开发问题整理

注:如果需要百度地图,需要百度账号生成api...

读出全部

js函数带括号和不带括号的区别

先说结果 1、加了括号的代表执行完毕得到函数...

读出全部