这两天做了一个小的offer项目,然后遇到了一些问题,稍微总结一下,感触最深的是cookie,因为之前只是简单的听说过,这次是第一次正面相撞。。
先说一下场景,简单的offer项目,登录,退出,登录的时候,后端的接口会将token返回给我,然后退出的时候我自己将cookie消掉。
登录的时候自己将获取的cookie写入浏览器,并设置有效期。
简单的存取操作:在使用javascript存取cookie时,必须要使用Document对象的cookie属性;
document.cookie = 'token=fdasfjsdkfljdjsfdlsjfsdkafjslkdasdjkfslkddsf'.
以上代码中,token表示cookie的名称,后面的一长串是对象后台传过来的一长串的字符串。这样就是所说的种植上cookie了呢。。。读取cookie的操作,实例是在登录后每次请求的时候都会在header里面将token带回去才会有权限访问。所以要读取到自己种下的cookie。
function getCookie(c_name){
if(document.cookie.length > 0){ //先查询cookie是否为空,为空就return ''
c_start = document.cookie.indexOf(c_name + '=') //通过String对象的indexOf()来检查这个cookie是否存在,不存在就为-1
if(c_start != -1){
c_start = c_start + c_name.length+1 //最后的+1是为了匹配‘=’,其目的就是获得cookie的开始位置。
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 ''
}设置cookie的有效期。。
当我写退出的时候,就是想把存储的cookie进行消除,但是对于消除cookie还一点概念都没有,刚开始使用的是将cookie制空,但是发现这种方法是不正确的,在浏览器中始终存在cookie,不手动在浏览器中清除cookie就登录不进去。后来才知道,当设置浏览器的cookie失效时,浏览器会自动将实效的cookie清除掉。。
cookie 的生命周期也就是有效期和失效期,即cookie的存在时间。在默认的情况下,cookie会在浏览器关闭的时候自动清除,但是我们cookie的有效期。语法如下
document.cookie = 'name=value;expires=date'
上面代码的date值为GMT(格林威治时间)格式的日期型字符串,生成方式如下:
var _date = new Date( );
_date.setDate(_date.getDate( )+30);
_date.toGMTString( );
上面三行代码分解为几步来看:
- 通过new生成一个Date的实例,得到当前的时间;
- getDate( )方法得到当前本地月份中的某一天,接着加上30就是我希望这个cookie能过在本地保存30天;
- 接着通过setDate( )方法来设置时间;
- 最后 用toGMTString( )方法来设置时间;
通过下面完整的函数来说明在创建cookie的过程中我们需要注意的地方。
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());
}
使用方法:setCookie('username','Darren',30)
在项目中使用到的设置cookie期限的代码:
var token = 'token=' + data.data.token
var exdate = new Date()
exdate.setDate(exdate.getDate()+1)
document.cookie = token+';expires='+exdate.toGMTString()
当点击退出时,调用的代码,设置其失效日期:
function logout(){
//通过设置cookie有效期失效来进行退出
var token = ""
if(document.cookie.length > 0){
var c_start = document.cookie.indexOf('token' + '=')
if(c_start != -1){
c_start = c_start + 'token'.length+1
var c_end = document.cookie.indexOf(';', c_start)
if(c_end == -1){
c_end = document.cookie.length
}
token = unescape(document.cookie.substring(c_start,c_end))
}
}
token = 'token=' + token
var exdate2 = new Date()
exdate2.setDate(exdate2.getDate() - 1)
document.cookie = token + ";path=/;expires="+exdate2.toGMTString()
window.location.href = "/login"
};
结尾附上一个不错的博客,http://www.cnblogs.com/Darren_code/archive/2011/11/24/Cookie.html