摘要：理解进公园背景这个公园有一个总公园总公园里有许多小公园总公园是登录页面小公园是域名相同的页面第一次进总公园第一次请求某个服务器工作人员检查你的入园是否符合条件后端查看是否是注册以后的用户通过条件的话工作人员会给你一张票后端会给你一个响应头这
Cookie, Session, LocalStorage, SessionStorage Cookie 理解
进公园
背景: 这个公园有一个总公园, 总公园里有许多小公园(总公园是登录页面, 小公园是域名相同的页面)
第一次进总公园, (第一次请求某个服务器)
工作人员检查你的入园是否符合条件(后端查看是否是注册以后的用户)
通过条件的话工作人员会给你一张票(后端会给你一个响应头, 这个响应头的作用是设置一个 cookie )
票的内容是只有工作人员才知道是否可以入园的字符串
第二次进总公园(第二次请求相同的域名)
你要带上这个票进公园(浏览器会在请求头带上cookie)
工作人员看到这个票, 确认里面的内容正确就给你进去(后端看到这个cookie就会让你直接进入登录后的页面)
Cookie 的实现服务器通过 Set-Cookie 头给客户端一串字符串(背)
客户端每次访问相同域名的网页时，必须带上这段字符串(背)
客户端要在一段时间内保存这个Cookie(背)
Cookie 默认在用户关闭页面后就失效，后台代码可以任意设置 Cookie 的过期时间
大小大概在 4kb 以内
Session的理解进公园
背景: 我是一个坏游客, 我知道什么样的字符串就可以进入公园, 于是我可以伪造假的门票, 工作人员发现了这个问题, 所以工作人员采用更安全的方法来审查门票
第一次进总公园, (第一次请求某个服务器)
工作人员检查你的入园是否符合条件(后端查看是否是注册以后的用户)
通过条件的话工作人员会给你一张票(后端会给你一个响应头, 这个响应头的作用是设置一个 cookie , cookie 的值是一个随机数)
并且工作人员把票的字符串和你的名字写到一张表里(后端设置一个session, 保存在服务器内存中, session的内容是之前的随机数对应你的用户信息)
票的内容是只有工作人员才知道是否可以入园的字符串
第二次进总公园(第二次请求相同的域名)
你要带上这个票进公园(浏览器会在请求头带上cookie)
工作人员看到这个票, 通过判断票的字符串是否和表的字符串匹配, 如果匹配,那么说明可以进入(后端拿到请求内容的cookie的随机数, 会和sessions的内容进行比对, 看请求的cookie的随机数有没有在sessions上出现,如果出现了, 就会让你进入登录后的页面)
比cookie多做两件事情(标了粗体)
sessions其实就是服务器的一块内存, key:value, 分别是随机数和用户的信息
Session的实现将 SessionID（随机数）通过 Cookie 发给客户端
客户端访问服务器时，服务器读取 SessionID
服务器有一块内存（哈希表）保存了所有 session
通过 SessionID 我们可以得到对应用户的隐私信息，如 id、email
这块内存（哈希表）就是服务器上的所有 session
localStorage挂在window的一个对象, 是浏览器的hash
掌握localStorage的三个 api
localStorage.setItem("xxx", "yyy") 如果 yyy 是对象, 那么要用 JSON 转一下再存储
localStorage.getItem("xxx")
localStorage.clear()
localStorage存在c盘文件
LocalStorage 跟 HTTP 无关
HTTP 不会带上 LocalStorage 的值
只有相同域名的页面才能互相读取 LocalStorage（没有同源那么严格）
每个域名 localStorage 最大存储量为 5Mb 左右（每个浏览器不一样）
常用场景：记录有没有提示过用户（没有用的信息，不能记录密码）demo
LocalStorage 永久有效，除非用户清理缓存
SessionStorage（会话存储）4,5,6,7同上
9不同: 在用户关闭页面（会话结束）后就失效 === 关闭页面
Session 通过 LocalStorage + 查询参数实现未完成
Cache-Control写在后端的相应大文件AA的路由中, 给响应内容的第二部分加上这里的某些语法
那么在第二次浏览器想请求同样的大文件AA时, 服务器发现了, 直接不产生 HTTP 请求,
浏览器直接在本地内存拿到大文件AA
在实际工作中, 入口文件(一般是index)不设置Cache-Control, 其他的文件都设置Cache-Control, 时间越长越好
首页不能设置Cache-Control的原因
假设设置了百度首页的Cache-Control为一天
用户一般进入百度首页只能是在 URL 中输入www.baidu.com, 那么首页在一天的时间内都不能获得最新的版本, 也可以理解为没有接口去更新页面了, 因为所有的路口都封锁了
但是为什么js文件, css文件又可以设置Cache-Control呢?
因为用户一般不会自己去请求js文件, css文件
如果遇到js文件更新版本, 那么怎么办?
在前端请求js文件中, 给路径加个查询参数即可
这是原来的: