前端Cookie基本使用方法

Cookie

Cookie 历来指就着牛奶一起吃的点心。然而,在因特网内,“Cookie”这个字有了完全不同的意思。那么“Cookie”到底是什么呢?“Cookie”是小量信息,由网络服务器发送出来以存储在网络浏览器上,从而下次这位独一无二的访客又回到该网络服务器时,可从该浏览器读回此信息。这是很有用的,让浏览器记住这位访客的特定信息,如上次访问的位置、花费的时间或用户首选项(如样式表)。Cookie是个存储在浏览器目录的文本文件,当浏览器运行时,存储在 RAM 中。一旦你从该网站或网络服务器退出,Cookie也可存储在计算机的硬驱上。当访客结束其浏览器对话时,即终止的所有 Cookie.

Cookie特点

Cookie内存大小受限

IE 6.0 IE 7.0 8.0 Opera Fire Fox Safari Chrome
Cookie个数 每个域名下20个 每个域名下50个 每个域名30个 每个域名50个 没有限制 每个域名53个
Cookie大小 4095字节 4095字节 4096字节 4097字节 4097字节 4097字节

Cookie具有生命周期

Cookie可以保持登录信息到用户下次与服务器的会话,换句话说,下次访问同一网站时,用户会发现不必输入用户名和密码就已经登录了(当然,不排除用户手工删除Cookie)。而还有一些Cookie在用户退出会话的时候就被删除了,这样可以有效保护个人隐私。
Cookie在生成时就会被指定一个Expire值,这就是Cookie的生存周期,在这个周期内Cookie有效,超出周期Cookie就会被清除。有些页面将Cookie的生存周期设置为“0”或负值,这样在关闭浏览器时,就马上清除Cookie,不会记录用户信息,更加安全。

Cookie满足同源策略

虽然网站images.google.com与网站www.google.com同属于Google,但是域名不一样,二者同样不能互相操作彼此的Cookie。

问题来了 举个例子:
访问玩zhidao.baidu.com 再访问wenku.baidu.com还需要重新登陆百度账号吗?

解决办法: 设置document.domain = ‘baidu.com’;


让页面属于这个基础域名下(那么此页面和任何二级域名为baidu.com的)

封装自己Cookie的增删改查函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*
2017/02/20
cookie操作
*/
function setCookie(key, value, iDay) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + iDay);
document.cookie = key + '=' + value + ';expires=' + oDate;
}
function removeCookie(key) {
setCookie(key, '', -1);//这里只需要把Cookie保质期退回一天便可以删除
}
function getCookie(key) {
var cookieArr = document.cookie.split('; ');
for(var i = 0; i < cookieArr.length; i++) {
var arr = cookieArr[i].split('=');
if(arr[0] === key) {
return arr[1];
}
}
return false;
}
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!