js里cookie操作

2021-10-16 01:48:09

原生js操作cookie

创建和存储 cookie

在这个例子中我们要创建一个存储访问者名字的 cookie。当访问者首次访问网站时，他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时，他们就会收到欢迎词。

首先，我们会创建一个可在 cookie 变量中存储访问者姓名的函数：

function setCookie(c_name,value,expiredays){
var exdate=new Date();
exdate.setTime(exdate.getTime()+expiredays);
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

上面这个函数中的参数存有 cookie 的名称、值以及过期天数。

setTime() 方法以毫秒设置 Date 对象，时间戳13位。这里如果要设置为30天，则expiredays为30*24*60*60*1000;也可以使用exdate.setDate(exdate.getDate()+expiredays)，expiredays直接使用天数。

在上面的函数中，我们首先将天数转换为有效的日期，然后，我们将 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,expiredays,path, domain){
    var exdate=new Date();
    exdate.setTime(exdate.getTime()+expiredays);
    var expiredays = (expiredays==null) ? "" : ";expires="+exdate.toGMTString();
    var path = (path == null) ? ";path=/" : ";path="+path;
    var domain = (domain == null) ? "" : ";domain=."+domain;

    document.cookie=c_name+ "=" +escape(value)+expiredays + 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.

码农公寓