js里cookie操作
原生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-Cookie
jquery: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
js里cookie操作的更多相关文章
- JS封装cookie操作函数实例(设置、读取、删除)
本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...
- Jquery和js实现cookie操作手机浮层广告;附加:js获取、添加、删除cookie
1.jquery cookie包实现手机上的浮层广告 <span style="font-size:18px;">$(document).ready(function( ...
- nw.js的cookie操作
在实战中,我遇到nw.js cookie一个奇怪的现象. 当我写入cookie(非httponly)后,关闭nw.js.然后再打开nw.js发现cookie没有写入成功.经过摸索,发现 nw.js的c ...
- js中cookie操作
js中操作Cookie的几种常用方法 * cookie中存在域的概念,使用path和domain区分: * 在同一域中的set和del可以操作同一名称的cookie,但不在同一域中的情况下,则set无 ...
- 关于JS 的cookie 操作 与 json 的数据结构 问题
今天写了一个购物车,由于购物车内容是保存在 cookie中 所以不想浪费服务器资源做cookie的操作 故在前端封装了一些对象来处理购物车,由于cookie的数据结构的设计是一个json格式 使用 账 ...
- js之cookie操作
1.使用document.cookie保存信息 document.cookie = "Test=cooo";alert(document.cookie); //hours为空字符串 ...
- js里cookie,localStorage的简单用法
cookie的使用场景---->注册功能(注册成功后,将账号和密码存入cookie里,在登录时显示到输入框里) 注册的js(将数据存入cookie): escape和unescap ...
- js封装Cookie操作 js 获取cookie js 设置cookie js 删除cookie
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code var CookieUtil = { // 设置cookie set : functi ...
- js封装Cookie操作
var CookieUtil = { // 设置cookie set : function (name, value, expires, domain, path, secure) { var coo ...
随机推荐
- JavaScript 三个组成部分
1.核心(ECMAScript) ECMAScript 仅仅是一个描述,定义了脚本语言的所有属性.方法和对象.其他语言可以实现 ECMAScript 来作为功能的基准,JavaScript 就是这样: ...
- 用js效果做的简单焦点图
/*js代码*/ <script src="js/js/myfocus-2.0.1.min.js" type="text/javascript">& ...
- linux下解压被分割的zip文件
形如被分割的一系列文件:linux.z01, linux.z02, linux.z03, linux.zip 直接右键解压是不行的. 首先合并文件:cat linux.* > linux_all ...
- 自适应布局webkit-box的用法
Flexible Box Model(灵活盒子模型)在平常的web横排布局中,会经常用到float或display:inline-block,但是在多种不同宽度的移动设备的自适应布局中用的话,还得设置 ...
- VC++ Debugger Tips[转]
本文摘自:http://blogs.msdn.com/b/vcblog/archive/2006/08/04/689026.aspx Hi, my name is Sergey Grankin and ...
- 看来System.dll是没法剔除依赖了
今天花了半天时间将System.Xml换成了Mono.Xml 想干掉System.dll发现不行了,System.Net以及System.IO都在这下面,还有protobuf-net也逃不掉这个 算啦 ...
- 杨光福IT讲师微博
杨光福IT讲师微博: http://weibo.com/321chinavideo 微博现在里面有很多干货,以后会越来越多,主要用于分享和交流技术.关注一下对你有帮助.
- PYTHON学习之路_PYTHON基础(10)
学习内容: Python进程与线程 1.线程及线程类 2.线程守护 3.线程等待 4.线程锁 5.信号量 6.timer用法 7.队列 8.事件驱动 9.生产者消费者模型 10.进程及进程同步 11. ...
- make基础(转)
1. 基本规则 请点评 除了Hello World这种极简单的程序之外,一般的程序都是由多个源文件编译链接而成的,这些源文件的处理步骤通常用Makefile来管理.Makefile起什么作用呢?我们先 ...
- Android--数据解析
一.XML解析: 1.Pull 解析方式: 1)先获取到一个 XmlPullParserFactory 的实例, 并借助这个实例得到 XmlPullParser 对象: 2)调用 XmlPullPar ...