Cookie, Session, LocalStorage, SessionStorage, Etag, Expire

Cookie, Session, LocalStorage, SessionStorage

Cookie 理解

进公园

背景: 这个公园有一个总公园, 总公园里有许多小公园(总公园是登录页面, 小公园是域名相同的页面)

1. 第一次进总公园, (第一次请求某个服务器)

   工作人员检查你的入园是否符合条件(后端查看是否是注册以后的用户)

   通过条件的话工作人员会给你一张票(后端会给你一个响应头, 这个响应头的作用是设置一个 cookie )

   票的内容是只有工作人员才知道是否可以入园的字符串

2. 第二次进总公园(第二次请求相同的域名)

   你要带上这个票进公园(浏览器会在请求头带上cookie)

   工作人员看到这个票, 确认里面的内容正确就给你进去(后端看到这个cookie就会让你直接进入登录后的页面)

Cookie 的实现

1. 服务器通过 Set-Cookie 头给客户端一串字符串(背)
2. 客户端每次访问相同域名的网页时，必须带上这段字符串(背)
3. 客户端要在一段时间内保存这个Cookie(背)
4. Cookie 默认在用户关闭页面后就失效，后台代码可以任意设置 Cookie 的过期时间
5. 大小大概在 4kb 以内

Session的理解

进公园

​ 背景: 我是一个坏游客, 我知道什么样的字符串就可以进入公园, 于是我可以伪造假的门票, 工作人员发现了这个问题, 所以工作人员采用更安全的方法来审查门票

1. 第一次进总公园, (第一次请求某个服务器)

   工作人员检查你的入园是否符合条件(后端查看是否是注册以后的用户)

   通过条件的话工作人员会给你一张票(后端会给你一个响应头, 这个响应头的作用是设置一个 cookie , cookie 的值是一个随机数)

   并且工作人员把票的字符串和你的名字写到一张表里(后端设置一个session, 保存在服务器内存中, session的内容是之前的随机数对应你的用户信息)

   票的内容是只有工作人员才知道是否可以入园的字符串

2. 第二次进总公园(第二次请求相同的域名)

   你要带上这个票进公园(浏览器会在请求头带上cookie)

   工作人员看到这个票, 通过判断票的字符串是否和表的字符串匹配, 如果匹配,那么说明可以进入(后端拿到请求内容的cookie的随机数, 会和sessions的内容进行比对, 看请求的cookie的随机数有没有在sessions上出现,如果出现了, 就会让你进入登录后的页面)

3. 比cookie多做两件事情(标了粗体)
4. sessions其实就是服务器的一块内存, key:value, 分别是随机数和用户的信息

Session的实现

1. 将 SessionID（随机数）通过 Cookie 发给客户端
2. 客户端访问服务器时，服务器读取 SessionID
3. 服务器有一块内存（哈希表）保存了所有 session
4. 通过 SessionID 我们可以得到对应用户的隐私信息，如 id、email
5. 这块内存（哈希表）就是服务器上的所有 session

   ​

localStorage

1. 挂在window的一个对象, 是浏览器的hash
2. 掌握localStorage的三个 api

   localStorage.setItem("xxx", "yyy") 如果 yyy 是对象, 那么要用 JSON 转一下再存储

   localStorage.getItem("xxx")

   localStorage.clear()

3. localStorage存在c盘文件
4. LocalStorage 跟 HTTP 无关
5. HTTP 不会带上 LocalStorage 的值
6. 只有相同域名的页面才能互相读取 LocalStorage（没有同源那么严格）
7. 每个域名 localStorage 最大存储量为 5Mb 左右（每个浏览器不一样）
8. 常用场景：记录有没有提示过用户（没有用的信息，不能记录密码）demo
9. LocalStorage 永久有效，除非用户清理缓存

SessionStorage（会话存储）

4,5,6,7同上

9不同: 在用户关闭页面（会话结束）后就失效 === 关闭页面

Session 通过 LocalStorage + 查询参数实现

未完成

Cache-Control

1. 写在后端的相应大文件AA的路由中, 给响应内容的第二部分加上这里的某些语法

   那么在第二次浏览器想请求同样的大文件AA时, 服务器发现了, 直接不产生 HTTP 请求,

   浏览器直接在本地内存拿到大文件AA

   在实际工作中, 入口文件(一般是index)不设置Cache-Control, 其他的文件都设置Cache-Control, 时间越长越好

2. 首页不能设置Cache-Control的原因

   • 假设设置了百度首页的Cache-Control为一天
   • 用户一般进入百度首页只能是在 URL 中输入www.baidu.com, 那么首页在一天的时间内都不能获得最新的版本, 也可以理解为没有接口去更新页面了, 因为所有的路口都封锁了
   • 但是为什么js文件, css文件又可以设置Cache-Control呢?
   • 因为用户一般不会自己去请求js文件, css文件
   • 如果遇到js文件更新版本, 那么怎么办?
   • 在前端请求js文件中, 给路径加个查询参数即可

     这是原来的: <script src="./js/main.js">

     这是现在的: <script src="./js/main.js?v=1">

Expire

1. 和Cache-Control写的位置一样, 语法,不同的是控制缓存的时间要写成什么时候过期的时间, 如Wed, 21 Oct 2015 07:28:00 GMT, 而用户有可能把本地的时间弄错, 所以现在都使用 Cache-Control

Etag

1. 与 MD5 有关系

   MD5是一种摘要算法, 用于确认信息传输是否一致

   如你下载一部电影, 网上的电影的文件对应一个MD5值,

   你下载电影后, 本地的电影也对应一个MD5值

   两个MD5值如果完全相同,就说明确实是一个文件了

   特点: 如果两个文件内容越相似, 那么两个MD5的值差异越大

2. 在后端中, 将相应的文件内容给一个 MD5的值, 并且把这个MD5的值设置为响应内容的第二部分中Etag(key)的value

   那么前端在重新请求这个文件的时候,请求内容就会带上if-None-Match: MDXXXXXXX这个请求头

   后端发现请求内容的if-None-Match: MDXXXXXXX和服务器中相应文件的MD5相同, 那么后端知道这个文件不需要下载

   给前端的响应内容没有第四部分,只有第一和第二部分, 并且返回的状态码是304

Cache-Control直接不请求, Etag直接不下载(要请求)

一些区别

更多文章在我的github上

https://github.com/wojiaofeng...