前端之cookie

摘要: cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。--w3school。在我看来cookie就是浏览器提供的一个可以在客户端存放一点数据的机制，按照网站来源新建一个文件夹，然后在这个文件夹里面放一些文件，再在文件里面写入要存储的数据。然后再在浏览器里面提供一些可以读写相应的文件的api。

cookie 作为前端存储数据的方式之一，虽然现在有了一些新的存储数据的方式，不过还是有不少公司还是把cookie作为前端存储数据的方式之一，所以我认为还是需要好好研究一下。

由于http是无状态的协议，所以要想知道来访问网站的用户是哪个的话，就必须要有一个能标识用户身份的变量。于是cookie诞生了。

cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。--w3school。在我看来cookie就是浏览器提供的一个可以在客户端存放一点数据的机制，按照网站来源新建一个文件夹，然后在这个文件夹里面放一些文件，再在文件里面写入要存储的数据。然后再在浏览器里面提供一些可以读写相应的文件的api。

比如javaee里面，当用户第一次来访问网站的时候，服务器会创建一个session，然后在返回给用户会把这个sesionid发送给用户，保存在用户的会话cookie里面，然后用户每次向服务器发送消息的时候都会把这个sessionid发送给服务器，如此网站就知道用户的身份了。当然既然能存放sessionid，那还能不能多存点东东呢？当然是可以的。只是每次浏览器发起请求的时候，都会把cookie给带上，所以尽量少存一些东西，免得浪费流量；而且因为安全性的缘故，不要存放敏感的信息。

那么cookie都具体有哪些属性呢？

name：要存储的数据的key值。

value：要存储的数据的value值。

Expires/Max-Age:指定了cookie的生存期，默认情况下cookie是暂时存在的，他们存储的值只在浏览器会话期间存在，当用户退出浏览器后这些值也会丢失，如果想让cookie存在一段时间，就要为Expires属性设置为未来的一个用毫秒数表示的过期日期或时间点，Expires默认为设置的Expires的当前时间。现在已经被Max-Age属性所取代，Max-Age用秒来设置cookie的生存期。如果用Expires设置时间的话，需要用GMT格式表示的时间字符串，如果设置为将来某个时间则浏览器会在将来时间到的时候删除这条cookie；如果不设置就是为会话cookie；如果设置为过去的某个时间，则浏览器会删除掉cookie，如果过时时间不是很久的话，浏览器或许不会立马删除掉这条cookie。如果用Max-Age设置时间的话（注意大小写，前面我用小写的max-age，结果一直没起作用，直到用Max-Age才生效），如果是正数，则表示该cookie会在max-age秒之后自动失效；如果为负数，则表示该cookie仅在本浏览器窗口以及本窗口打开的子窗口内有效；如果为0，则表示删除该cookie。

domain：domain属性可以使多个web服务器共享cookie。domain属性的默认值是创建cookie的网页所在服务器的主机名。不能将一个cookie的域设置成服务器所在的域之外的域。

path：指定与cookie关联在一起的网页。在默认的情况下cookie会与创建它的网页，该网页处于同一目录下的网页以及与这个网页所在目录下的子目录下的网页关联。

secure：值为boolean值，指定在网络上如何传输cookie，默认是不安全的，通过一个普通的http连接传输；设置为true时只能通过https或其他安全协议连接时才传递。

HttpOnly：限制了 cookie 对 HTTP 请求的作用范围。特别的，该属性指示用户代理忽略那些通过"非 HTTP" 方式对 cookie 的访问（比如浏览器暴露给js的接口）。

好，下面上代码，写的一个前端操作cookie的工具，写得不好的欢迎大家提意见，愿意与大家一起进步。

function isArray(obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
}
function MakeCookie(isSecure){
this.set('caniusecookieshere','yesican');
if(this.get('caniusecookieshere')!='yesican'){
console.warn('没有获取到cookie，请检查cookie是否被禁用或是已设置为HttpOnly.');
}else{
this.del('caniusecookieshere');
if(!!isSecure){
this.secure=';Secure';
}else{
this.secure='';
}
}
}
MakeCookie.prototype={
/**
* 获取cookie值
* @param  要获取的cookie的名称
* @return 如果查找到的cookie的值则返回cookie的值，否则返回空
*/
get:function (name) {
var cstart=document.cookie.indexOf(name+'=');
if(cstart!=-1){
cstart=cstart+name.length+1;
var cend=document.cookie.indexOf(';',cstart);
if(cend==-1){
cend=document.cookie.length;
}
var cookieval=document.cookie.substring(cstart,cend);
return decodeURIComponent(cookieval);
}else{
window.console.log('您要查找的cookie '+name+' 不存在。。。');
return null;
}
},
/**
* 获取多个cookie的值
* @param ['test','name2'],['test2']  或'name1'
* @return json对象  {test:testval,name2:name2val,test2:testval} 或 {}
*/
gets: function () {
var gcookie={};
for(var i in arguments){
if(isArray(arguments[i])){
for(var j in arguments[i]){
gcookie[arguments[i][j]]=this.get(arguments[i][j]);
}
}else{
gcookie[arguments[i]]=this.get(arguments[i]);
}
}
return gcookie;
},
/**
* 删除cookie
* @param 'name1'
* @return null，如果要检查是否已经删除了，请调用get方法
*/
del:function (name,path,domain) {
var exp=new Date();
exp.setTime(exp.getTime()-1000000000000);
path=!!path?(';path='+path):'';
domain=!!domain?(';domain='+domain):'';
document.cookie=name+'="";Expires='+exp+path+domain;
},
/**
* 删除cookie，如果是主域或上级路径的cookie可能删除不了，可以使用set_j方法删除，将天数设置为负数
* @param ['name1','name2']
* @return null
*/
dels:function (name) {
var exp=new Date();
exp.setTime(exp.getTime()-1000000000000);
for(var i in name){
document.cookie=name[i]+'="";Expires='+exp;
}
},
/**
* 简单的set方法,默认为会话cookie,设置时间的单位为天
* @param 'name1','name1val',day
* @return null
*/
set:function (name,value,day) {
var exp='';
if(day!=''){
exp=new Date();
exp.setTime(exp.getTime()+day*24*60*60*1000);
exp=';Expires='+exp;
}
document.cookie=name+'='+encodeURIComponent(value)+exp+this.secure;
},
/**
* 简单的set方法,默认为会话cookie,设置时间的单位为天,当前路径，当前主机
* 可以用这个方法删除父域名下的cookie或上级路径下的cookie
* @param {name,value,day,path,domain}
* @return null
*/
set_j:function (setParam) {
var param={
name:'',
value:'',
day:'',
path:'',
domain:''
}
try{
setParam=JSON.parse(setParam);
}catch(e){}
param=this.extendJson(param,setParam);
var exp='',
path=param.path!=''?(';path='+param.path):'',
domain=param.domain!=''?(';domain='+param.domain):'';
if(param.day!=''){
exp=new Date();
exp.setTime(exp.getTime()+param.day*24*60*60*1000);
exp=';Expires='+exp;
}
document.cookie=param.name+'='+encodeURIComponent(param.value)+exp+path+domain+this.secure;
},
/**
* 设置多个cookie的方法
* @param  参数可以为多个，每个参数可以为一维或二维数组，每个参数分别为[name,value,time,path,domain]，
* [['ly',23,1],['liuy','yong']],[['ly1',23,1],['liuy1','yong']]
* @return null
*/
sets:function () {
var day,exp,param={};
for(var i in arguments){
for(var j in arguments[i]){
if(isArray(arguments[i][j])){
this.set_j(setParam(arguments[i][j][0],arguments[i][j][1],
arguments[i][j][2],arguments[i][j][3],arguments[i][j][4]));
}else{
this.set_j(setParam(arguments[i][0],arguments[i][1],
arguments[i][2],arguments[i][3],arguments[i][4]));
break;
}
}
}
function setParam(name,val,d,p,domain){
param={
name:name,
value:val
}
if(!!d){
param.day=d;
}
if(!!p){
param.path=p;
}
if(!!domain){
param.domain=domain;
}
return JSON.stringify(param);
}
},
/**
* 一个简单的初始化对比修改json的方法
* @param  father(原始数据)   child(修改的数据)
* @return 被修改了的原始数据
*/
extendJson:function(father,child){
for(var i in child){
father[i]=child[i];
}
return father;
}
}