学习笔记: JavaScript/JQuery 的cookie操作

转自:http://blog.csdn.net/barryhappy/archive/2011/04/27/6367994.aspx

cookie是网页存储到用户硬盘上的一小段信息。最常见的作用是判断用户是否登录、保存偏好设置等。我用到这个是写扫雷时,需要用cookie保存用户的设置,如行、列等。功能已具,笔而记之。

cookie具有特定的格式——

        cookiename=cookievalue; expires=epirationDateGMT; path=URL; domin=siteDomin; secure: boolean

可以看出由分号隔开的几部分——第一部分是cookie的名称和值,这是每一个cookie中必须有的。其余部分都是可选的:第二部分是cookie的过期时间,到了这个时间浏览器会自动将其删除,如果没有这部分则默认是在关闭浏览器时将其删除。第三部分允许在cookie中存储一个URL,第四部分存储一个域值(这个基本不用管,浏览器会将当前网页的地址存入),第五部分是一个布尔值,为ture时要求传输一个安全协议,如https。

一般我们只需要讨论第一部分和第二部分,即值和过期时间

javascript的写cookie操作示例:

view plaincopy to clipboardprint?

  1. var expireDate = new Date(); // 获取当前时间
  2. expireDate.setDate(expireDate.getDate()+1); //设置日期为一天后
  3. var cookieValue = "hello";
  4. document.cookie = "aCookie=" + cookieValue +"; expires="+expireDate.toGMTString();//写cookie
  5. alert(document.cookie);

这段代码执行完之后就会创建一个cookie,名称为aCookie,值为"hello",过期时间为一天后。最后一句会打印出这个cookie的内容

可以在谷歌浏览器中查看到它的信息:(谷歌浏览器不支持本地网页文件的cookie,要用它操作cookie必须要放到服务器上!!早先不知道这个,Chrome中没出想要的结果,我费劲心思纠结好久好久……囧
     名称: aCookie 
     内容: hello 
     域: 127.0.0.1 
     路径: /Test2 
     发送: 各种连接 
     可访问脚本的 Cookie: 是 
     已创建: 2011年4月27日星期三下午8:37:12 
     过期时间: 2011年4月28日星期四下午8:37:12

一个页面是可以有多个cookie的,它们会被存放在同一个文件中,所以形如 aCookie=”Hello”; anotherCookie=”world” 是一个合法的cookie

cookie本质上是一段字符串,所以可以用任何操作字符串的方法去操作它, 对于上面一个cookie,可以用代码:var string = document.cookie.split("=")[1].split(";")[0]; 获取aCookie的值"hello”.

当只设置一个cookie时,存取操作都不复杂,但是当一个页面中存在多个cookie时,这个操作就会变的优点复杂了,如上面得到"hello”的字符串操作就已经略显复杂了。

这时候我们可以借助JQuery来实现更优雅的操作。

JQuery的一个小插件~只有1K多的,名称即为Cookie,包含且只包含如下代码——

view plaincopy to clipboardprint?

  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(); // use expires attribute, max-age is not supported by IE
  18. }
  19. // CAUTION: Needed to parenthesize options.path and options.domain
  20. // in the following expressions, otherwise they evaluate to undefined
  21. // in the packed version for some reason...
  22. var path = options.path ? ‘; path=‘ + (options.path) : ‘‘;
  23. var domain = options.domain ? ‘; domain=‘ + (options.domain) : ‘‘;
  24. var secure = options.secure ? ‘; secure‘ : ‘‘;
  25. document.cookie = [name, ‘=‘, encodeURIComponent(value), expires, path, domain, secure].join(‘‘);
  26. } else { // only name given, get cookie
  27. var cookieValue = null;
  28. if (document.cookie && document.cookie != ‘‘) {
  29. var cookies = document.cookie.split(‘;‘);
  30. for (var i = 0; i < cookies.length; i++) {
  31. var cookie = jQuery.trim(cookies[i]);
  32. // Does this cookie string begin with the name we want?
  33. if (cookie.substring(0, name.length + 1) == (name + ‘=‘)) {
  34. cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
  35. break;
  36. }
  37. }
  38. }
  39. return cookieValue;
  40. }
  41. };

只要将这段代码加载之后,便可以使用它的方法了(加载的方法不用多说了吧?最简单的是你直接把它拷到你所用的jQuery中;或者把这段单独存为一个js文件,在html文件中引用……)。

很方便的操作,用法大致如下:

view plaincopy to clipboardprint?

  1. $.cookie(‘the_cookie‘); //读取Cookie值
  2. $.cookie(’the_cookie’, ‘the_value’); //设置cookie的值
  3. $.cookie(’the_cookie’, ‘the_value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});//新建一个cookie 包括有效期 路径 域名等
  4. $.cookie(’the_cookie’, ‘the_value’); //新建cookie
  5. $.cookie(’the_cookie’, null); //删除一个cookie

其实可以看到,这个插件中只有一个方法,而用参数的不同来实现不同的操作。

一个示例——

view plaincopy to clipboardprint?

    1. /* 设开始时页面不存在cookie*/
    2. padding-top: 0px !important; padding-right: 3px !important;
      padding-bottom: 0px !important; padding-left: 10px !important;
      border-top-style: none; border-right-style: none; border-bottom-style:
时间: 2024-10-11 23:19:10

学习笔记: JavaScript/JQuery 的cookie操作的相关文章

【学习笔记】jQuery中的动画与效果

1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值:jQuery  参数-speed:三种预订速度之一的字符串String(slow,normal,fast)或表示动画时长的毫秒数Number  callback:在完成动画时执行的函数,每个匹配元素执行一次 slow=600毫秒  normal=400毫秒  fast=200毫秒 以优雅的动画隐藏所

学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcElement(触发事件的事件源对象)和attachEvent("onclick",function(){...}); 2. a. 实现拖放(Drag and Drop): 目前支支持IE, 若定制某对象为可拖放对象, 则必须覆盖目标对象的dragenter和dragover事件, 可以用e

jquery之cookie操作

jquery之cookie操作 Cookies 定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.js基于jquery:先引入jquery,再引入:jquery.cookie.js:下载:http://plugins.jquery.com/cookie/ <script type="text/javascript" src="js/jquery.min.js"></sc

MySQL学习笔记之五 有关数据表操作

MySQL在创建表的时候,创建一个.frm文件保存表和列定义.索引存储在一个有.MYI(MYindex)扩展名的文件并且数据存储在有.MYD(MYData)扩展名的文件中.   一.用SHOW/ DESCRIBE语句显示数据表的信息 语法: SHOW TABLES [FROM db_name] [LIKE wild] or SHOW COLUMNS FROM tbl_name [FROM db_name] [LIKE wild] or SHOW INDEX FROM tbl_name [FROM

[Spring Data MongoDB]学习笔记--MongoTemplate查询操作

查询操作主要用到两个类:Query, Criteria 所有的find方法都需要一个query的object. 1. 直接通过json来查找,不过这种方式在代码中是不推荐的. BasicQuery query = new BasicQuery("{ age : { $lt : 50 }, accounts.balance : { $gt : 1000.00 }}"); List<Person> result = mongoTemplate.find(query, Perso

HTML学习笔记(jQuery)NO.6

jQuery库可以通过一行简单的标记被添加到网页中它是一个JavaScript函数库,封装了浏览器兼容性的问题 该库所包含的功能 HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX->在不刷新页面的同时来修改页面的内容,将服务器请求的事件直接反应到页面上,提高用户体验 Utilties工具 网页添加jQuery 1)从jQuery.com下载jQuery库 2)从CDN中载入jQuery,如从google中加载j

HTML 学习笔记 JavaScript(面向对象)

现在让我们继续跟着大神的脚步前进 学习一下JavaScript中的面向对象的思想,其实作为一个iOS开发者,对面向对象还是比较熟悉的,但是昨晚看了一下Js中的面向对象,妈蛋 一脸萌比啊.还好有大神.让我们跟着大神的思路在捋一下.(在这里更欢迎大家阅读原博 )原博地址:http://www.cnblogs.com/dolphinX/p/4385862.html 理解对象 对象这个词如雷贯耳,同样出名的一句话:XXX语言中一切皆为对象! 对象是什么?什么觉面向对象的编程? 对象(object),台湾

Android(java)学习笔记167:Java中操作文件的类介绍

1.File类:对硬盘上的文件和目录进行操作的类.    File类是文件和目录路径名抽象表现形式  构造函数:        1) File(String pathname)       Creates a new File instance by converting the given pathname string into an abstract pathname. 2)File(File parent, String child)       Creates a new File i

javaEE学习笔记【03】XML操作

XML简介 XML即可扩展的标记语言.因此该语言中所有的标签都是没有预先定义的,开发者可以自己随意的指定. 目前为止所有的标记的语言都属于开源的语言.由W3C组织进行一个基本的维护. 因此大家学习这些语言的时候应该参考W3C公布的文档. XML作用 1.可以用作软件的配置文件. 2.可以实现独立平台的数据传输. C. XML .Java  .天气预报 3.Web Service. 4.可以描述带关系的数据. XML声明指令 语法: 1 <?xml version=""  enco