文章目录
Cookie
先来了解一下什么是Cookie
Cookie是什么
Cookie是服务器发送到用户浏览器并保存在本地的一小块数据,会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。
通常,Cookie用于告知服务端两个请求是否来自同一浏览器,如保持用户的登录状态。 cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。Cookie技术产生源于HTTP协议在互联网上的急速发展。
Cookie曾一度用于客户端数据的存储,因当时并没有其它合适的存储办法而作为唯一的存储手段。但现在随着现代洳览器开始支持各种各杵的存储方式, Cookie渐渐被淘汰。由于服务器指定Cookie后,浏览器的每次请求都会携带Cookie数据,会带来额外的性能开销。
Cookie的存储
Cookie保存在客户端某个特定的目录下的一个扩展名为“txt" 文本文件中,并且不同站点的Cookie数据保存不同的文件中。
Cookie数据一般 都是加密后保存的。
Cookie的作用域
Domain和Path标识定义了Cookie的作用域,即Cookie应该发送给哪些URL。
- Domain标识指定了哪些主机可以接受Cookie。
- 如果不指定,默认为当前文档的主机(不包含子域名)。
- 如果指定了Domain,则一般包含子域名。例如,如果设置Domain=wolongxueyuan.com,则Cookie也包含在子域名中(如developer.wolongxueyuan.com)。
- Path标识指定了主机下的哪些路径可以接受Cookie (该URL路径必须存在于请求URL中)。以字符%x2F("/")作为路径分隔符,子路径也会被匹配。
Cookie的有效期
Max-Age和Expires标识定义了Cookie的有效期,即Cookie的生命周期。
- 会话期Cookie
- 会话期Cookie是最简单的C Cookie。浏览器关闭之后Cookie会被自动删除,也就是说Cookie仅在会话期内有效。会话期Cookie不需要指定过期时间( Expires )或者有效期(Max-Age)。
- 持久性Cookie
- 持久性Cookie可以指定一个 特定的过期时间( Expires )或有效期(Max-Age )。
Cookie的应用
- 会话状态管理(如用户登录状态、购物车、游戏分数或其它需要记录的信息)
- 个性化设置(如用户自定义设置、主题等)
- 浏览器行为跟踪(如跟踪分析用户行为等)
那么我们怎么来创建Cookie呢
Cookie的创建
Cookie存储可以是多个内容,其格式为键值对name=value
。多个内容中间用;
隔开。
document.cookie = 'name=zhuangwuji'
读取Cookie
allCookies
被赋值为一个字符串,该字符串包含所有的Cookie,每条cookie以分号分隔(即key= value键值对)。
var allCookies = document.cookie
console.log(allCookies);
var arr = allCookies.split(';')
for (var i = 0; i < arr.length; i++) {
var cookie = arr[i]
var cookiePair = cookie.split('=')
console.log(cookiePair[0] + '=' + cookiePair[1]);
}
修改Cookie
与创建类似。
document.cookie = 'name=zhuangwuji'
删除Cookie
删除Cookie只需要将键对应的值设置为空,并且把Expires标识为以前的时间即可。
document.cookie = 'name=;expires=Thu,01 jan 1970 00:00:00 GMT'
HTTP中的Cookie
Set-Cookie响应头
服务器使用Set-Cookie响应头部向用户代理(一般是浏览器)发送cookie信息。一个简单的Cookie可能像这样:
值和名是成对出现的
Set-Cookie: <cookie名>=<cookie值>
服务器通过该头部告知客户端保存Cookie信息。
Set-Cookie头不止能出现一次,还可以多次出现,因为每一次都携带数据
HTTP/1.0 200 ok
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry
Cookie请求头
对服务器发起的每一次新请求,浏览器都会将之前保存的Cookie信息通过Cookie请求头部再发送给服务器。
Cookie携带的数据是多个
GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco;tasty_cookie=strawberry
我们如果想完成整个流程,就需要响应头的Set-Cookie和请求头的Cookie才能完成.
整理不易,点个赞再走吧 =ω=