梳理cookie

cookie 是JavaScript提供的一种本地存储机制,是存于硬盘某一位置的文本文件。以win7 Chrome 为例,其cookie的存储位置为C:\Users\yourUserName\AppData\Local\Google\Chrome\UserData\Default\Cookies
打开开发者工具,在Application->Storage->Cookies标签下,可以查看与网站相关的cookie。
当cookie读/写时,会被对应地解码/编码。

名称:cookie的唯一标识符,不区分大小写(例如demo与Demo指向相同的cookie)。
:储存在cookie 中的字符串值。
:是指cookie 对于哪个域是有效的,默认为设置cookie 的那个网站的域。比如将某一cookie的域设置为.demo.com,那么,对所有该域(例如域名为api.demo.com的后端接口)发送的请求,都会携带这个cookie信息。
路径:对于指定域中的路径发送cookie信息,例如,指定路径为 http://www.demo.com/login,那么请求 http://www.demo.com/ 的页面就不会发送cookie信息,即使请求都是来自同一个域的。
失效时间:表示cookie何时被删除的时间戳,默认浏览器会话结束时即将所有cookie 删除。可以自己设置删除时间。这个值是个GMT 格式的日期(Wdy, DD-Mon-YYYY HH:MM:SS GMT),用于指定应该删除cookie 的准确时间。如果设置的失效日期是个以前的时间,则cookie 会被立刻删除。
安全标志:指定后,cookie 只有在使用SSL 连接的时候才发送到服务器。例如,cookie 信息只能发送给 https://www.demo.com,而 http://www.demo.com 的请求则不能发送 cookie。

数据持久:刷新页面,仍然存在有效的cookie。
多页面共享数据:将不同页面需要共享的数据写入cookie,是种不错的选择。
信息验证:请求服务端会携带对应的有效cookie,可核查信息。
保持登陆状态:像论坛这类具有登陆功能的网站,会在用户登陆成功后写入相关cookie以维持用户的登陆状态,直到cookie被销毁。

禁用cookie:将浏览器设置为禁用cookie会禁止cookie相关操作。
数量限制:每个域的cookie总量是有限的,cookie超出限制会导致浏览器删除陈旧的cookie,腾出空间给新设置的cookie。
cookie可被篡改:cookie可以被脚本修改,这就需要某些加密手段对cookie进行加密处理。

原生js实现

创建cookie

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function setCookie(name,value,expiredate,domain,path,secure){
var cookieText=escape(name)+"="+escape(value);
if(expiredate){
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredate);
cookieText+=";expires="+exdate.toGMTString();
}
if(domain){
cookieText+=";domain="+domain;
}
if(path){
cookieText+=";path="+path;
}
if(secure){
cookieText+=";secure";
}
document.cookie=cookieText;
}

必须传入参数name和value

根据name获取对应cookie

1
2
3
4
5
6
7
8
9
10
11
12
function getCookie(c_name) {
if (document.cookie.length > 0) {
var c_start = document.cookie.indexOf(c_name + "=")
if (c_start != -1) {
c_start = c_start + c_name.length + 1
var 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

1
2
3
function deCookie(name,value,expiredate,domain,path,secure){
this.setCookie(name,"",new Date(0),domain,path,secure);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//创建名为name值为value,有效期为7天,路径为`/`的cookie
$.cookie('name', 'value', { expires: 7, path: '/' });
//获取指定name的cookie,若找不到,返回 undefined
$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined
//获取所有有效cookie
$.cookie();
//删除指定cookie,删除失败返回false
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false
//若创建某一cookie时设置了额外信息,删除时需要传入对应的额外参数
$.cookie('name', 'value', { path: '/' });
// 删除失败
$.removeCookie('name'); // => false
// 删除成功
$.removeCookie('name', { path: '/' }); // => true

写入json数据:调用JSON.stringify()方法,将json数据转换为字符串,利用上面的cookie操作创建cookie。

读取json数据:读取该cookie时,返回json字符串,调用JSON.parse()方法,解析为原json数据。