本地化存储:cookie

cookie: n. 饼干;小甜点

为什么会引入Cookie(在客户端保持http状态)

因为http协议是一种无状态协议,web服务器本身不能识别出哪些请求是同一个服务器发送的,浏览器的每一次请求都是独立的。因此引入cookie来唯一标识一个用户,同时记录该用户的状态。

Cookie介绍

Cookie是浏览器在访问WEB服务器的某个资源时,由WEB服务器在HTTP响应头附带传送给浏览器的一个小文本文件。
  1. 一旦WEB浏览器保存了某个cookie,那么它在以后每次访问该服务器时,都会带在HTTP请求头将这个cookie回传给web服务器。
  2. 一个cookie只能标识一种信息,它至少含有一个标识该信息的名称(Name)和设置值。
  3. 一个WEB站点可以给一个WEB服务器发送多个cookie,一个WEB浏览器也可以存储多个WEB站点提供的Cookie
  4. 浏览器一般只允许存放300个Cookie,每个站点最多存放20个Cookie,每个Cookie的大小限制为4KB。

    Cookie底层原理

WEB服务器通过HTTP响应信息中增加Set-cookie字段将cookie信息发送给浏览器,浏览器则通过在HTTP请求中增加cookie请求字段将cookie回传给Web服务器。服务器根据cookie辨别用户,也可以修改cookie内容。
当网页要发http请求时,浏览器会先检查是否有相应的cookie,有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的,而且每一次http请求浏览器都会自动帮我们做。这个特点很重要,因为这关系到“什么样的数据适合存储在cookie中”。
存储在cookie中的数据,每次都会被浏览器自动放在http请求中,如果这些数据并不是每个请求都需要发给服务端的数据,浏览器这设置自动处理无疑增加了网络开销;但如果这些数据是每个请求都需要发给服务端的数据(比如身份认证信息),浏览器这设置自动处理就大大免去了重复添加操作。所以对于那设置“每次请求都要携带的信息(最典型的就是身份认证信息)”就特别适合放在cookie中,其他类型的数据就不适合了。当然cookie标准还是做了一些限制的:每个域名下的cookie 的大小最大为4KB,每个域名下的cookie数量最多为20个(但很多浏览器厂商在具体实现时支持大于20个)]

浏览器查看cookie值:application—>cookie

cookie其他特点

cookie不可跨域:就是不能在不同的域名下用,每个cookie都会绑定单一的域名

Cookie的特点

  • cookie 主要用于标识用户身份,而 Web Storage 主要用于浏览器端存储数据;
  • 一般情况下浏览器端不会修改 cookie,但会频繁操作 Web Storage(sessionStorage,localStorage)
    • cookie 最大允许存储 4KB,而 Web Storage 每一个源支持 5MB(视浏览器而定,最小保守是 5MB);
  • cookie 每次都会包含在 http 请求中,而 Web Storage 由脚本控制选择性提交;
  • cookie 在设置的有效期内都有效,sessionStorage 在当前页面关闭前有效,localStorage 长期有效,直到 用户删除它或通过脚本删除它
  • sessionStorage 不能共享,localStorage 在同源文档之间共享, cookie 在同源且符合 path 规则的文档之间共享

Cookie的优点

  • 通过加密和安全传输技术(SSL),减少cookie被破解的可能
  • 不需要服务器资源 直接存储在本地
  • 每个域的cookie总数是有限的,不同浏览器之间各有不同。
    Firefox 限制每个域最多 50 个 cookie。
    • cookie大小的限制
      大多数浏览器4096B的长度限制,为了兼容多种浏览器,最好将长度限制在4095B以内.每个domain最多只能有20条cookie。
  • 由于所有的 cookie 都会由浏览器作为请求头发送,所以在 cookie 中存储大量信息会影响到特定域的 请求性能。

    Cookie的参数

    name: cookie的名字 [必须]
    value: cookie值 [必须](由于cookie规定是名称/值是不允许包含分号,逗号,空格的,所以为了不给用户到来麻烦,考虑服务器的兼容性,任何存储cookie的数据都应该被编码。)value: cookie值 [必须](由于cookie规定是名称/值是不允许包含分号,逗号,空格的,所以为了不给用户到来麻烦,考虑服务器的兼容性,任何存储cookie的数据都应该被编码。)
    domain: cookie绑定的域名。[可选,如果没有设置,自动绑定到执行语句的当前域;注:同一个域名下的二级域名也是不可以交换使用cookie的,比如www.baidu.com和image.baidu.com也是不可以公用的]
    出于安全考虑,网站不能访问由其他域所创建的cookie【

    https://blog.csdn.net/supermao1013/article/details/83827310
  1. 在setcookie中省略domain参数,那么domain默认为当前域名
  2. domain参数可以设置父域名,如果设置cookie在子域名;父级访问不到cookie
  3. 如果cookie设置为顶级域名,则全部的域名,包括顶级域名、二级域名、三级域名等,都可以共享该cookie
  4. 如果cookie设置为当前域名,则当前域名及其下面的所有子域名可以共享该cookie
  5. 二级域名能读取设置了domain为顶级域名或者自身的cookie,不能读取其他二级域名domain的cookie。例如:要想cookie在多个二级域名中共享,需要设置domain为顶级域名,这样就可以在所有二级域名里面或者到这个cookie的值
    域名区分

path: 服务器路径 ,当路径设置为/blog时,会给/blog路径下绑定cookie(可选)

1
2
3
4
//默认路径
www.baidu.com
//blog路径
www.baidu.com/blog

Expire/Max-Age: Cookie有效期(可选)
Size:cookie大小 (可选)
HttpOnly:设置为true,就不能通过js脚本来获取cookie的值,能防止xss攻击(可选)

客户端操作cookie值(document.cookie可以对cookie进行读写)

1
2
3
4
//读取浏览器中的cookie
console.log(document.cookie);
//写入cookie
document.cookie='myname=laihuamin;path=/;domain=.baidu.com';

服务端设置cookie值

不管你是请求一个资源文件(如 html/js/css/图片),还是发送一个ajax请求,服务端都会返回response。而response header中有一项叫set-cookie,是服务端专门用来设置cookie的;
服务端返回的response header中有5个set-cookie字段,每个字段对应一个cookie(注意不能将多个cookie放在一个set-cookie字段中),set-cookie字段的值就是普通的字符串,每个cookie还设置了相关属性选项。
一个set-Cookie字段只能设置一个cookie,当你要想设置多个 cookie,需要添加同样多的set-Cookie字段。
服务端可以设置cookie 的所有选项:expires、domain、path、secure、HttpOnly

cookie的应用

  1. 购物车
  2. 自动登录(登录账号时自动登录)
  3. 广告(记录你最近浏览过的,买过的类似东西,都是通过cookie记录的)
  4. 记住登录状态
  5. 单点登陆 ( Single Sign On, SSO),是目前比较流行的企业业务整合的解决方案之一.
    简单的说, 就是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。它包括可以将这次主要的登录映射到其他应用中用于同一个用户的登录的机制。
  6. 显示上次浏览过的商品

    参考文章

    https://bubkoo.com/2014/04/21/http-cookies-explained/
    https://zhuanlan.zhihu.com/p/25834961
    https://segmentfault.com/a/1190000004556040
-------------本文结束感谢您的阅读-------------