关于cookie、session和HTTP缓存

Cookie是什么

HTTP Cookie(也叫Web Cookie或浏览器Cookie)是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。

Cookie的作用

cookie比较常见的作用是用于识别用户身份。

举个例子:当用户A去访问a.com的时候,服务器会给A一个独一无二的id=001(这就是cookie),当用户A访问a.com的其他网页的时候,都会带着那个独一无二的id。当B用户来访问a.com的时候,服务器发现他没有任何标识,也会给他一个独一无二的id=002,所以借助cookie服务器端就能够分清楚谁是谁了。

Cookie的特点

  • 服务器通过 Set-Cookie 头给客户端一串字符串
  • 客户端每次访问相同域名的网页时,必须带上这段字符串
  • 客户端要在一段时间内保存这个Cookie
  • Cookie 默认在用户关闭页面后就失效,后台代码可以任意设置 Cookie 的过期时间。比如max-age和后面要讲的Expires
  • 大小大概在 4kb 以内

Cookie存在的问题

  • 用户可以随意篡改 Cookie 。

  • Cookie 的存储大小有限制: 4KB 左右。

Session

Session是什么

维基百科的解释:

在计算机科学领域来说,尤其是在网络领域,会话(session)是一种持久网络协议,在用户(或用户代理)端和服务器端之间创建关联,从而起到交换数据包的作用机制,session在网络协议(例如telnet或FTP)中是非常重要的部分。

简单来说,session 是一种在服务器端保存数据的机制。服务器通过读取浏览器发送的 cookie 和 服务器端的 session 来交换数据。 session 的作用和 cookie 的作用大致相同。最大的不同点在于两者的安全性和实现方式。

Session的实现

  1. 产生 sessionID:session 是基于 cookie 的一种方案,所以,首先要产生 cookie。client 第一次访问 server,server 生成一个随机数,命名为 sessionID,并将其放在响应头里,以 cookie 的形式返回给 client,client 以处理其他 cookie 的方式处理这段 cookie。大概是这样:cookie:sessionID=135165432165
  2. 保存 sessionID: server 将要保存的数据保存在相对应的 sessionID 之下,再将 sessionID 保存到服务器端的特定的保存 session 的内存中(如 一个叫 session 的哈希表)
  3. 使用 session: client 再次访问 server,会带上首次访问时获得的 值为 sessionID 的cookie,server 读取 cookie 中的 sessionID,根据 sessionID 到保存 session 的内存寻找与 sessionID 匹配的数据,若寻找成功就将数据返回给 client。
  • session 在服务器端,cookie 在客户端。
  • session 用户无法查看和修改,cookie 用户可以查看修改。
  • session 的实现依赖于 sessionID,而 sessionID 又存储在 cookie 上,所以也可以说:session 是基于 cookie 实现的一种数据存储方式。

LocalStorage

LocalStorage是什么

localStorage 是 HTML5 提供的一个 API。

localStorage 的实质是一个hash(哈希表),是一个存在于浏览器上的 hash(哈希表)。

localStorage 提供了几个 API 来添加、读取、删除 localStorage:

  • localStorage.setItem(key, value) :往 hash 中添加 key: value 的数据
  • localStorage.getItem(key):读取 hash 中 key 的值
  • localStorage.removeItem(key):删除 hash 中的 key
  • localStorage.clear():清空整个localStorage

每个域名 cookie 的大小是4Kb,每个域名 localStorage 的最大存储量的一般为 5MB左右,Chrome 10MB 左右。

cookie 的使用要通过 HTTP,客户端每次访问相同域名时会带上 cookie,而 localStorage 与 HTTP 没有一毛钱关系。

localStorage 理论上永久有效,除非用户清理缓存;cookie默认有效时间是二十分钟左右,用户关闭页面后就失效,后台可以设置 cookie 的过期时间。

sessionStorage

sessionStorage 的所有性质基本上与 localStorage 一致,唯一的不同区别在于:

sessionStorage 在用户关闭页面(会话结束)后就失效,而localStorage一直有效。

Cache-Control

###Cache-Control是什么

Cache-Control 通用消息头被用于在http 请求和响应中通过指定指令来实现缓存机制。缓存指令是单向的, 这意味着在请求设置的指令,在响应中不一定包含相同的指令。

Cache-Control 有 2 种使用方式:

  1. 以请求头形式使用 客户端可以在 HTTP 请求中使用 Cache-Control 指令
1
request.setHeader('Cache-Control','max-age=99999999') // 将此次请求的资源缓存 99999999 秒
  1. 以响应头形式使用 服务器(node版本)可以在响应请求时,设置 Cache-Control
1
response.setHeader('Cache-Control','max-age=99999999')  // 将此次请求的资源缓存 99999999 秒

Cache-Control 的作用

Cache-Control 使用缓存机制,用来缩短二次访问的响应时间,提高页面响应性能,实现web性能优化。

Expires

Expires 是以前版本的缓存控制,如果你设置了 Cache-Control,那么 Expires 会失效。

需要注意的是。Expires 使用的是本地时间,会受本地事件影响。

Cache-Control 和 Expires ,优先使用 Cache-Control。

Etag

ETag HTTP响应头是资源的特定版本的标识符。 Etag 是 HTTP 的内容,通过匹配标识符来判断资源是否需要下载。

Cache-Control: max-age 缓存 与 ETag 的区别

  • Cache-Control 通过 max-age 设置缓存的有效时间(持续时间),表示在 n 秒内不要再去向服务器要这个资源了,直接从内存缓存里面获得。
  • ETag是通过匹配标识符(一串md5值)来判断资源是否需要下载,如果匹配,服务器将返回不带任何内容的304未修改状态,告诉客户端缓存版本可用。
  • Cache-Control 不访问服务器,有时间限制;ETag 访问服务器,无时间限制。

last-Modified

The Last-Modified 是一个响应首部,其中包含源头服务器认定的资源做出修改的日期及时间。

last-Modified 的作用及使用方法和 Etag 基本一致。

其他

Expires 指定了一个日期/时间, 在这个日期/时间之后 cookie 过期; Cache-Control:max-age指定了一个秒数,经过此秒数后 cookie 过期;

如何删除cookie

服务器端可以通过设置 Expires、Cache-Control: max-age将 Cookie 设置为过期状态 客户端可以通过document.cookie API 删除 cookie 。