前言
首先我们来复习一下HTTP的相关知识,关于请求与响应组成部分详情知识请:
Chrome客户端向server发请求request,HTTP是80端口,HTTPS则是443端口。server会对Chrome客户端作出响应response响应头包括cookie,cache-control。cookie
- 服务器通过 Set-Cookie 响应头给客户端一串字符串
- 服务器得到 Cookie 后,客户端每次访问相同域名的网页时,必须带上这段字符串
- 客户端要在一段时间内保存这个Cookie
- Cookie 是有有效期的,默认在用户关闭页面后就失效,后台代码可以任意设置 Cookie 的过期时间
- 大小大概在 4kb 以内
- Cookie 存在的问题在于其可被用户可以随意篡改
Session
- 将 SessionID(随机数)通过 Cookie 发给客户端
- 客户端访问服务器时,服务器读取 SessionID
- 服务器有一块内存(哈希表)保存了所有 session
- 通过 SessionID 我们可以得到对应用户的隐私信息,如 id、email
- 这块内存(哈希表)就是服务器上的所有 session
LocalStorage
- LocalStorage 跟 HTTP 无关
- HTTP 不会带上 LocalStorage 的值
- 只有相同域名的页面才能互相读取 LocalStorage(没有同源那么严格)
- 每个域名 localStorage 最大存储量为 5Mb 左右(每个浏览器不一样)
- 常用场景:记录有没有提示过用户(没有用的信息,不能记录密码)
- LocalStorage 永久有效,除非用户清理缓存
SessionStorage(会话存储)
1、2、3、4 同上
- SessionStorage 在用户关闭页面(会话结束)后就失效。
Cache-Control
cache-control可以让浏览器在一段时间内不访问服务器(使用max-age,如response.setHeader('Cache-Control','max-age=300000000')
),直接用本地的硬盘或内存作为响应,这样能够节省渲染页面的时间;当我们更新页面时,只要更新一下url路径即可,这样浏览器就不会再使用缓存而是去下载最新的版本。
Expires
Expires 的使用方法,如:
response.setHeader('Expires','Sun,04 Feb 2018 14:55:08 GM')
当设置了max-age/s-max-age指令的Cache-Control响应头时,Expires会被忽略。Cache-Control和Expires 区别在于?Cache-Control是设置多久过期的,而Expires则是设置什么时候过期。我们应该优先使用Cache-Control,因为Expires 设置的过期时间指的是本地时间,而我们不能保证用户的本地时间是否正确。