Session、LocalStorage、Cache-Control

1. 如何解决用户可以篡改Cookie的问题

我们声明一个变量sessions，这是一个hash

let sessions = {
  
}

因为登录里面，直接把email暴漏给用户了

if(found){
        response.setHeader('Set-Cookie':`sign_in_email=${email}`)
        response.statusCode = 200
      }

我们不这样写，我们给它创建一个sessionID

if(found){
        let sessionId = Math.random() * 100000//产生一个随机数
        sessions[sessionId] = {sign_in_email:email}//不直接把email寄到cookie里面，我们把email寄到sessions里面
        response.setHeader('Set-Cookie':`sessionId=${sessionId}`)//只给它一个sessionId
        response.statusCode = 200
      }

在server.js里修改一个路由

if(path === '/'){
    var string = fs.readFileSync('./index.html','utf8')
    let cookies = ''
    if(request.headers.cookie){
      cookies = request.headers.cookie.split('; ')
    }
    let hash ={}
    for(let i=0;i

随机数是最安全的，这样就查询不到用户的信息了。

面试官问你：什么是Session？
1.服务器通过Cookie给用户一个SessionId
2.SessionId对应服务器内的一小块内存
3.每次用户访问服务器的时候，服务器就通过SessionId去读取对应的session，知道用户的隐私信息

总结
Cookie的3个特点：
1.服务器通过Set-Cookie头给客户端一串字符串
2.客户端每次访问相同域名的网页时，必须带上这段字符串
3.客户端要在一定时间内保存这段Cookie
4.Cookie 默认在用户关闭页面后就自动失效，但是后台代码可以任意设置 Cookie 的过期时间。

Session的特点：
如果我直接把用户的ID或者email存到Cookie里面，用户可以直接篡改
1.将sessionId（随机数）通过Cookie发给客户端
2.客户端访问服务器时，服务器读取sessionId
3.服务器有一块内存（哈希表）保存了所有session
4.通过sessionId我们可以得到用户对应的隐私信息
5.这块内存（哈希表）就是服务器上的所有session

2. LocalStorage简介和应用

LocalStorage是html5提供的API，实质是一个hash（浏览器上的），session是服务器上的哈希表。常用的有localstorage.setItem('a','1')、localstorage.getItem('a')、localstorage.clear()
它们都是用了操作当前页面里面的一个哈希。
持续化存储在C盘的一个内存里。
LocalStorage最典型的应用，记录下你有没有提示过用户：

LocalStorage的特点：
1.LocalStorage 跟 HTTP 无关
2.HTTP 不会带上 LocalStorage 的值
3.只有相同域名的页面才能相互读取 LocalStorage（没有同源那么严格）
4.每个域名 LocalStorage 最大存储量为5Mb左右（每个浏览器不一样）
5.常用场景：记录有没有提示过用户（没有用的不敏感信息，不能记录密码）
6.LocalStorage 永久有效，除非用户清理缓存（ctrl+shift+delete，进入设置，在 高级，勾选“Cookie及其他网站数据”，点“清除数据”，LocalStorage被清理了）

SessionStorage（会话存储）的特点：
1、2、3、4同上
5.SessionStorage 在用户关闭页面（会话结束）后就自动失效。

3. 面试题：

1. 请问 Cookie 和 Session 是什么关系？
   一般来说，Session 是基于 Cookie 实现的，因为Session 必须要把 sessionId 放在 Cookie 里面，然后再发给客户端，没有SessionId 就没有Session。Session是依赖于Cookie的，Cookie是Session的基石。
2. 请问Cookie 和 LocalStorage 有什么区别？
   （1）Cookie 每次请求时会被浏览器带给服务器，LocalStorage 不会被浏览器带给服务器，因为LocalStorage 跟 HTTP 无关；
   （2）一般来说，Cookie 只有4k，LocalStorage 有5Mb
   3.请问 LocalStorage 和 SessionStorage 有什么区别？
   LocalStorage 永久有效，除非用户清理缓存。
   SessionStorage 在用户关闭页面（会话结束）后就自动失效。

不基于 Cookie 的 Session（超纲不记）

4. 缓存控制的 Cache-Control

你想让哪一个请求被缓存，你就给一个
response.setHeader('Cache-Control','max-age=30')
那么这段时间内，他就永远不会再请求你了，那么它的下载时间就是0。

为什么首页不能设置 Cache-Control?
Chrome 不允许，在设置的时间内，就算代码更新了，用户也没有办法获取最新的版本，用户刷新得到的都是旧的缓存，有风险。
需要留一个入口，一般来说，首页（尤其是html）不要设置缓存。而给css和js 设置的max-age=10年，如果有更新，则改变url，变成.css?v=2(或者.js?v=2)，就不会再用之前的缓存，而是升级到最新的版本

总结：Cache-Control的功能：
Cache-Control可以让浏览器在一段时间内不访问你浏览器，直接用本地的硬盘或内存作为响应，这样就极快，连请求都没有。如果要更新，只有在入口处（一般为html）把url稍微变动一点，那么它就不会使用缓存，浏览器就会去下载最新版本。

5. Expires

如果在Cache-Control响应头设置了 "max-age" 或者 "s-max-age" 指令，那么 Expires 头会被忽略。

优先使用Cache-Control，Expires是以前的版本，现在升级了。
区别是Cache-Control为多久过期，而Expires是什么时间过期（本地时间，容易错乱）

6. Etag

Etag是用来给文件版本号的
md5是一个摘要算法，它把一个文件变成一个字符串，如果这个文件有任何一个地方改动了，它就会变成差异很大的字符串，一个内容对应一个md5。
如果一个内容差异很小，md5算出来的字符串差异很大，也就是说，它可以把微小的差异放大。

如果你的md5跟我上次存的md5一样，说明不需要下载

7. 课后题及答案

1. Cookie 和 Session 的区别
   1.Cookie保存在客户端，储存在本地硬盘上，每次请求都会带上对应域名的Cookie值，随请求发送给 Server。
   2.Session 保存在 Server 的内存里，其 Session ID 是通过 Cookie 发送给客户端的。

2. Cookie 和 LocalStorage 的区别
   （1）Cookie 每次请求时会被浏览器带给服务器，LocalStorage 不会被浏览器带给服务器，因为LocalStorage 跟 HTTP 无关；
   （2）储存空间大小不同。一般来说，Cookie 只有4k，LocalStorage 有5Mb
   （3）过期时间不同。Cookie 默认在用户关闭页面后就自动失效，但是后台代码可以任意设置 Cookie 的过期时间。LocalStorage 永久有效，除非用户清理缓存。

3. LocalStorage 和 SessionStorage 的区别
   1.LocalStorage 永久有效，除非用户清理缓存。
   2.SessionStorage 在用户关闭页面（会话结束）后就自动失效。

4. Cookie 如何设置过期时间？如何删除 Cookie？
   （1）在 Cookie 字段中设置过期时间的方式又：
   设置response.setHeader('Expires,'xxx') xxx为格林尼治时间，
   或者
   设置response.setHeader('Cache-Control','max-age=yyy') yyy为多少秒后cookie失效。
   （2）为Cookie设置一个过期时间就会自动删除
   document.cookie = 'test=xxxx;Expires='+new Date(0).toGMTString()
   或者
   document.cookie = 'test=xxxx;max-age=0'
   //这个方法也可以立即删除这个Cookie

5. Cache-Control: max-age=1000 缓存 与 ETag 的「缓存」有什么区别？
   （1）('Cache-Control','max-age=1000')是设置缓存过期时间为1000秒以后，在此期间优先使用缓存，不会发出HTTP请求。
   （2）Etag 要发请求才行。Etag 是设置一个标记（md5字符串），重新获取此资源时，会在请求中添加If-None-Match:xxx 后端会对比这个标记，如果没有改变，直接返回304状态码，表示文件未改变，可以继续使用，如果改变就直接返回新的内容。