关于Cookie的简单总结

Cookie简介

HTTP Cookie(也叫Web Cookie或浏览器Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。一般,它用于告知服务端两个请求是否来自同一浏览器,如保持用户的登陆状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。javascript

Cookie主要用于如下三个方面:html

  • 回话状态管理(例如用户登陆状态 , 购物车等)
  • 个性化设置(如用户自定义设置,主题等)
  • 浏览器行为跟踪 (如跟踪分析用户行为等)

建立Cookie

当服务器收到HTTP请求时,服务器能够在响应头里面添加一个Set-Cookie选项。浏览器收到响应后一般会保存下Cookie,以后对该服务器每一次请求中都经过Cookie请求头部将Cookie信息发送给服务器。另外,Cookie的过时时间、域、路径、有效期、适用站点均可以根据须要来指定。java

Set-Cookie: <cookie名>=<cookie值>
HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry
[页面内容]

如今,对该服务器发起的每一次新请求,浏览器都会将以前保存的Cookie信息经过Cookie请求头部再发送给服务器。chrome

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

客户端获取Cookie

客户端能够经过以下代码获取Cookie值.浏览器

document.cookie

图片描述

代码实现获取各个cookie值服务器

var Cookie = {};
var cookie = document.cookie;
var tempArr = cookie.split(';');
var len = tempArr.length;

for(var i = 0; i < len; i++){
    var tempCookie = tempArr[i];
    var p = tempCookie.indexOf('=');
    var key = tempCookie.substring(0,p);
    var value = tempCookie.substring(p+1);
    value = decodeURIComponent(value);
    Cookie[key] = value;
}

获取结果:cookie

图片描述

另外除了在控制台去打印,在chrome的调试器中也能够看到cookie信息.并发

图片描述

Cookie 必须在 HTML 文件的内容输出以前设置;不一样的浏览器 (Netscape Navigator、Internet Explorer) 对 Cookie 的处理不一致,使用时必定要考虑;客户端用户若是设置禁止 Cookie,则 Cookie 不能创建。 而且在客户端,一个浏览器能建立的 Cookie 数量最多为 300 个,而且每一个不能超过 4KB,每一个 Web 站点能设置的 Cookie 总数不能超过 20 个
设置Cookie
var setCookie = function(key,value,expires){
    var iDay = new Date();
    var maxTime = iDay.setDate(iDay.getDate() + expires);
    document.cookie = key + "=" + value + "; " + "expires=" + maxTime;
};

图片描述

删除Cookie值
var deleteCookie = function(key){   
    setCookie(key,"",-1);
}
相关文章
相关标签/搜索