js里cookie操作
2015-12-24 21:33
701 查看
原生js操作cookie
创建和存储 cookie
在这个例子中我们要创建一个存储访问者名字的 cookie。当访问者首次访问网站时,他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时,他们就会收到欢迎词。首先,我们会创建一个可在 cookie 变量中存储访问者姓名的函数:
function setCookie(c_name,value,expires){ var exdate=new Date(); exdate.setTime(exdate.getTime()+expires); document.cookie=c_name+ "=" +escape(value)+((expires==null) ? "" : ";expires="+exdate.toGMTString()); }
上面这个函数中的参数存有 cookie 的名称、值以及过期天数。
setTime() 方法以毫秒设置 Date 对象,时间戳13位。这里如果要设置为30天,则
expiredays为30*24*60*60*1000;也可以使用
exdate.setDate(exdate.getDate()+expiredays),expiredays直接使用天数:
function setCookie(c_name,value,expiredays){ var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); }
在上面的函数中,我们首先将天数转换为有效的日期,然后,我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。
注意,如果执行
setCookie('test', 123)之后,默认的cookie状态是:
name:test value: 123 domain: www.cnblogs.com path: /52fhy/p/ expires: Session(即关闭当前会话cookie就失效了) size:6
所以实际情况下,我们还得设置domain,path,expires。文章后面提供优化方法。
获取cookie
之后,我们要创建另一个函数来检查是否已设置 cookie。function getCookie(c_name){ if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1){ c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return "" }
上面的函数首先会检查 document.cookie 对象中是否存有 cookie。假如 document.cookie 对象存有某些 cookie,那么会继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie,就返回值,否则返回空字符串。
获取所有cookie
console.log(document.cookie);
删除cookie
function delCookie(name) { var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval=getCookie(name); if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString(); }
指定可访问cookie的路径
默认情况下,如果在某个页面创建了一个cookie,那么该页面所在目录中的其他页面也可以访问该cookie。如果这个目录下还有子目录,则在子目录中也可以访问。例如在www.xxxx.com/html/a.html中所创建的cookie,可以被www.xxxx.com/html/b.html或www.xxx.com/ html/ some/c.html所访问,但不能被www.xxxx.com/d.html访问。为了控制cookie可以访问的目录,需要使用path参数设置cookie,语法如下:
document.cookie="name=value; path=cookieDir";
其中cookieDir表示可访问cookie的目录。例如:
document.cookie="userId=320; path=/shop";
就表示当前cookie仅能在shop目录下使用。
如果要使cookie在整个网站下可用,可以将cookie_dir指定为根目录,例如:
代码如下:
document.cookie="userId=320; path=/";
指定可访问cookie的主机名
和路径类似,主机名是指同一个域下的不同主机,例如:www.google.com和gmail.google.com就是两个不同的主机名。默认情况下,一个主机中创建的cookie在另一个主机下是不能被访问的,但可以通过domain参数来实现对其的控制,其语法格式为:document.cookie="name=value; domain=cookieDomain";
以google为例,要实现跨主机访问,可以写为:
document.cookie="name=value;domain=.google.com";
这样,所有google.com下的主机都可以访问该cookie。
domain的设置,有几点要注意:
1.在setcookie中省略domain参数,那么domain默认为当前域名。
2.domain参数可以设置父域名以及自身,但不能设置其它域名,包括子域名,否则cookie不起作用。
那么cookie的作用域:
cookie的作用域是domain本身以及domain下的所有子域名。
cookie作用域必须有效,js里包括localhost,错误的不生效。php里cookie作用域不能是localhost,设置为空或者false。
总结
cookie的处理过程比较复杂,并具有一定的相似性。因此可以定义几个函数来完成cookie的通用操作,从而实现代码的复用。例如设置cookie,这里针对上面的进行优化:
function setCookie(c_name,value,expires,path, domain){ var exdate=new Date(); exdate.setTime(exdate.getTime()+expires); var expires = (expiredays==null) ? "" : ";expires="+exdate.toGMTString(); var path = (path == null) ? ";path=/" : ";path="+path; var domain = (domain == null) ? "" : ";domain=."+domain; document.cookie=c_name+ "=" +escape(value)+expires + path + domain; }
我们再次执行
setCookie('test2',123,1*24*3600*1000, '/', 'cnblogs.com')之后,默认的cookie状态是:
name:test2 value: 123 domain: .cnblogs.com path: / expires: 不再是Session,而是具体的失效时间 size:8
当然,我们也可以使用第三方库处理。
使用第三方库操作cookie
zepto:https://github.com/kennx/Zepto-Cookiejquery:https://github.com/carhartl/jquery-cookie
zepto版本的修改来自jquery版本。所以用法两者类似。
用法
格式: $.fn.cookie(key, value, options); key (string), 键名. value (string), 键值. options (object), 设置expires, path, or domain等.
示例
$.fn.cookie('foo', 'bar'); //设置cookie $.fn.cookie('foo'); //获取cookie $.fn.cookie('foo', 'bar', { expires: 7 }); //设置cookie,有效期7天
可选项
{ expires : 7 } //有效期天数,若为空则设置缺省,即仅当前会话有效 { path: '/foo' }//存储路径,若为空则设置缺省,即当前路径 { domain: 'example.com' } //域名,若为空则设置缺省,即当前域名 { secure: true } //Whether the cookie requries a secure connection (https). Defaults to false. { raw: true } //Whether or not to URI encode the cookie value. Defaults to false.
参考
1、JS设置Cookie过期时间 - 小角色 - 博客园
http://www.cnblogs.com/chenou/articles/1128040.htm
2、Expires和max-age的区别 - Robin99 - 博客园
http://www.cnblogs.com/yinhaiming/articles/1490811.html
3、js中cookie的使用详细分析_javascript技巧_脚本之家
http://www.jb51.net/article/14566.htm
相关文章推荐
- Javascript DOM 编程艺术(second edition) 读书笔记(1)
- JSON数据造假和解析
- js中的for in
- js运算符
- JSP+Servlet使用commons.fileupload和commons.io完成图片上传
- JavaScript 如何给对象添加方法
- javascript Date format(js日期格式化)
- 图片上传,支持同步/异步、预览(MVC、uploadify异步提交、js预览、ajaxSubmit异步提交)兼容大部分浏览器,含代码
- 移动开发js库Zepto.js使用中的一些注意点
- day_07JSP简介
- Jackson fasterxml和codehaus的区别
- js实现程序框
- web物理引擎p2.js入门手册
- maven项目 访问部分html或jsp…
- 解决eclipse编辑javascript很卡的…
- js获取月份和季度最后一天
- Angular JS 在chrome中测试本地文件
- 帮助你简化Cookie操作的javascript…
- 每天一个JavaScript实例-推断图片是否载入完毕
- javascript执行环境上下文