cookie/session/localstorage

一、session

cookie是可以被篡改的，这样就会暴露出来一些信息。所以我们可以使用sessions

１．将SessionId（随机数）通过Cookie发给客户端

let sessionId = Math.random() * 100000
sessions[sessionId] = { sign_in_email: email }
response.setHeader('Set-Cookie', `sessionId=${sessionId}`)
response.statusCode = 200

２．客户端访问服务器时，服务器读取SessionId

let mySession = sessions[hash.sessionId]
let email
if (mySession) {
     email = mySession.sign_in_email
}

Cookie

１．服务器通过Set-Cookie头给客户端一串字符串
２．客户端每次访问相同域名的网页时，必须带上这段字符串
３．客户端要在一段时间内保存这个Cookie
４．cookie默认在用户关闭页面后就失效，后台代码可以任意设置cookie的过期时间

Session

１．将SessionId（随机数）通过Cookie发给客户端
２．客户端访问服务器时，服务器读取SessionId
３．服务器有一块内存保存了所有的session
４．通过sessionId，我们可以得到用户的隐私信息，如ID, email
５．这块内存，就是服务器上的sessions

什么是session

服务器通过cookie给用户一段sessionId，sessionId对应服务器中的一小块内存，每次用户访问服务器的时候，服务器就通过这个sessionId去读取对应的session，从而获得用户的隐私信息

二、localStorage

三个API的使用

localStorage.setItem('a','1')
localStorage.getItem('a') //1
localStorage.clear() //清空

javascript中的一个问题，比如我们在index.html中设置

var a = 1
console.log(a)

那么很明显，会打印出１，我们接着操作

a=2

那么这个时候，a就变成了2，但是当我们刷新页面的时候，a就又变为１了。
如何解决这个问题，就是用localSorage来解决。
我们依然在index.html中设置：

        let a = localStorage.getItem('a')
        if (!a) {
            a = 0
        } else {
            a = parseInt(a) + 1
        }
        console.log(a)
        localStorage.setItem('a', a)

这样就可以实现，刷新页面a++

localStorage的一个典型应用：

需求：网站更新，需要用户在第一个进入的时候，提示用户网站更新，只提示一次

let ready = localStorage.getItem('isActive')
if (!ready) {
    alert('网站更新')
    localStorage.setItem('isActive', true)
}

LocalStorage

１．localStorage与HTTP无关
２．HTTP不会带上localStorage的值
３．只有相同域名的页面才能互相读取LocalStorage（没有同源那么严格）
４．每个域名localStorage最大存储量是5Mb左右（每个浏览器不一样）
５．常用场景：记录有没有提示过用户（没用的信息，不能记录密码）
６．localStorage永久有效，除非用户清理缓存

SessionStorage

1,2,3,4同上
５．sessionStorage在用户关闭窗口后，失效

问题

问题１：请问cookie和session是什么关系
session是基于cookie来实现的，cookie是session的基石
问题２：cookie和localStrorage的区别是什么
cookie会被浏览器带到服务器上，而localStorage和HTTP无关，不会被带到服务器。cookie一般是4k，而localStorage一般是5MB左右
问题３：localStorage与SessionStorage的区别
localStorage是永久有效的，而SessionStorage一般在用户关闭页面就会失效。

三、cache control

假如我们现在要请求一个比较大的css文件，放在css/defautl.css文件中，我们在index.html中link这个文件。
那么在主页中，将会请求这个文件。
我们在服务器中这样设置它的响应头：

if (path === '/css/default.css') {
        let string = fs.readFileSync('./css/default.css', 'utf8')
        response.setHeader('Cache-Control', 'max-age=30')
        response.setHeader('Content-Type', 'text/css;charset=utf8')
        response.write(string)
        response.end()
    } ...

就会发现响应头中有：Cache-Control: max-age=30这么一句话，实际上，设置了在30s内不再请求这个文件，从缓存中获得。

问题

问题一：在首页中不能设置cache-control
chrome不允许给首页设置缓存，如果你给首页设置了缓存，那么当页面更新的时候，页面不会发生任何变化。
问题二：设置30s，只是我们的示例，我们一般设置为一年或者十年，但是当我们的版本更新的时候，如何更新缓存？
这样的：我们存的时候，只有相同的URL，我们才会忽略，直接去找缓存，那么，我们修改下URL就可以。
比如：这样link

就可以完成更新

其他

expires

expires和cache-control类似，现在不用。

MD5

cache-control直接不请求，ETag直接不下载。

任何一个对象，toString都是obj obj

({}).toString()  //[object Object]