文章目录
Cookie是什么
Cookie是服务器发送到用户浏览器并保存在本地的一小块数据,会在刘览器下次向同一服务器再发起请求时被携带并发送到服务器上。
通常,Cookie用于告知服务端两个请求是否来自同一浏览器,如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。Cookie技术产生源于HTTP协议在互联网上的急速发展。
Cookie曾一度用于客户端数据的存储,因当时并没有其它合适的存储办法而作为唯一的存储手段。但现在随着现代浏览器开始支持各种各样的存储方式,Cookie渐渐被淘汰。由于服务器指定Cookie后,浏览器的每次请求都会携带Cookie数据,会带来额外的性能开销。
Cookie解决HTTP协议的无状态问题
Cookie的存储
Cookie保存在客户端某个特定的目录下的一个扩展名为“.txt”文本文件中,并且不同站点的Cookie数据保存不同的文件中。
Cookie数据一般都是加密后保存的。
Cookie的作用域
Dornain和Path标识定义了Cookie的作用域,即Cookie应该发送给哪些URL。
- Dormain标识指定了哪些主机可以接受Cookie。
- 如果不指定,默认为当前文档的主机(不包含子域名)。
- 如果指定了Domain,则一般包含子域名。例如,如果设置Domain=wolongxueyuan.com,则Cookie也包含在子域名中(如developer.wolongxueyuan.com)。
- Path标识指定了主机下的哪些路径可以接受Cookie(该URL路径必须存在于请求URL中)。以字符%×2F(“I”)作为路径分隔符,子路径也会被匹配。
Cookie的有效期
Max-Age和Expires标识定义了Cookie的有效期,即Cookie的生命周期。
- 会话期Cookie
会话期Cookie是最简单的Cookie。刚览器关闭之后Cookie会被自动删除,也就是说Cookie仅在会话期内有效。会话期Cookie不需要指定过期时间(Expires)或者有效期(Max-Age) - 持久性Cookie
持久性Cookie可以指定一个特定的过期时间(Expires)或有效期(Max-Age)。
Cookie的应用
Cookie主要用于以下三个方面:
- 会话状态管理(如用户登录状态、购物车、游戏分数或其它需要记录的信息)
- 个性化设置(如用户自定义设置、主题等)
- 刘览器行为跟踪(如跟踪分析用户行为等)
访问与更新Cookie
创建Cookie
JavaScript可以使用document.cookie
属性来访问和更新Cookie。语法结构如下所示:
document.cookie = newCookie;
newCookie
是一个键值对形式的字符串。需要注意的是,用这个方法一次只能对一个cookie进行设置或更新。
document.cookie= "name=wolongxueyuan";
document.cookie = "someCookieName=true; expires=Fr,31 Dec 9999 23:59:59 GMT; path=/";
读取Cookie
JavaScript可以使用documentcookie属性来访问和更新Cookie。语法结构如下所示:
allCookies = document.cookie;
allCookies被赋值为一个字符串,该字符串包含所有的Cookie,每条cookie以分号分隔(即key=value键值对)。
var cookies = document.cookie;
console.log( cookies );//多个Cookie用";"分割
var arr = cookies.split(';');
for(var i=0; i<arr.length; i++){
var cookie = arr[i];//键值对用=分割
var cookiePair = cookie.split('=');
console.log(cookiePair[o]+'='+ cookiepair[1]);
}
删除Cookie
JavaScript删除Cookie只需要设置Expires标识为以前的时间即可。如下所示:
document.cookie = "username=; expires=Thu, 01Jan 1970 00:00:00 GMT";
需要注意的是,当删除时不必指定Cookie的值。
HTTP中的Cookie
Set-Cookie响应头
服务器使用Set-Cookie响应头部向用户代理(一般是测览器)发送Cookie信息。一个简单的Cookie可能像这样:
Set-Cookie:<cookie名>=<cookie值>
服务器通过该头部告知客户端保存Cookie信息。
HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy..cookie=choco
Set-Cookie: tasty..cookie=strawberry
[页面内容]
Cookie请求头
对服务器发起的每一次新请求,刘览器都会将之前保存的Cookie信息通过Cookie请求头部再发送给服务器。
GET/sample-.page.html HTTP/1.1
Host: www.example.org
Cookie: yummy.cookie=choco; tasty_cookie=strawberry