Cookie、Session、LocalStorage、Cach

Cookie

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

请求优化

response.setHeader('Cache-Control', 'max-age=30')
// 意思是30秒内同样的URL不在重复访问，直接从本地缓存获取

注：首页无法设置，因为浏览器不允许。

更新缓存：

可以通过更改主页引入的URL地址来更新缓存：

<link rel="stylesheet" href="./css/default.css?v=2">
<script src="./js/main.js?v=2"></script>

更多API搜索： http set cookie

Expire

• 作用与Cache-Control 类似，但计算时间的方法不一样，Expire 是通过类似闹钟的设置，到了某个固定的时间点更新请求 (固定时间指的是本地时间)

• 但是这种方法有个缺点就是用户的系统时间错乱了容易误判时间 (比如用户将时间设定在未来的时间点，那这种方法的时间就会缩短或无效)。

• 两种方法同时存在时优先使用 Cache-Control

Cache-Control 与 Expire 的区别

一个是多久过期，一个是什么时间过期

Session

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

概况：Session 就是给每个用户一个随机数组成的ID，每个ID对应一个用户名，用户第一次登陆后下次每次登录只需要通过用户的ID查找用户名即可，即使有人篡改ID，由于ID是由随机数组成，所以很难破解。

LocalStorage 是什么

html5 所有新的web技术统称为 html5技术 包括，新的标签，新的。。。

LocalStorage 是 HTML5 技术 提供的API

LocalStorage 本质是一个浏览器上的一个哈希表

API用法：

//在内存中存储一个key并且对应一个value
localStorage.setItem('a','1')
//object类型不能直接存储，需要通过JSON转换
localStorage.setItem('jsonString', JSON.stringify({name:'obj'}))
//获取存储的值
localStorage.getItem('a') //获取'a'对应的value '1'
localStorage.getItem('jsonString') //获取'jsonString'对应的value '{"name":"obj"}'
//清除所有存储的值
localStorage.clear() //清除内存中存储的所有值

用来操作当前页面的哈希

LocalStorage 可以存储在本地C盘的一个文件中，所以即使页面刷新它的值也不会消失

案例：a每次刷新后都会加一并存储在本地C盘文件中

let a = localStorage.getItem('a')
if(!a){
    a = 0
}else {
    a = (+a) + 1 //这里也可看写作 a = parseInt(a,10) + 1 表示将a转换为数字再加一
}
console.log('a')
console.log(a)
localStorage.setItem('a', a)

用途

典型案例：网页改版提示，使用 localStorage 可以使网页改版后的页面只会在用户第一次刷新时提示

let already = localStorage.getItem('已提示')
if(!already){
    alert('你好，我们的网页已经改版，来看看有哪些新功能吧~')
    localStorage.setItem('已提示', true)
}

LocalStorage 的特点：

1. LocalStorage 与 HTTP 无关

2. HTTP 不会带有 LocalStorage 的值

3. 只有相同域名的网页才可以互相读取 LocalStorage (但没有同源策略那么严格)

4. 每个域名 LocalStorage 最大存储量为 5Mb 左右 (每个浏览器都不一样)

   //如何测试浏览器 LocalStorage 的最大存储:
   let a = ''
   for(let i = 0; i < 1000000; i++){
       a += '嘤嘤嘤嘤嘤嘤嘤嘤嘤'
   }
   console.log(a.lenght)
   localStorage.setItem('xxx', a)
   

5. 常用场景: 记录一些没有提示过用户 (比如只需要提示用户一次的更新信息)，以及一些没有用的信息 (不涉及隐私敏感信息的普通信息)

6. LocalStorage 理论上永久有效，除非你将浏览器的缓存清理

SessionStorage

中文：会话存储

常用API与 LocalStorage 类似:

sessionStorage.setItem('a',1) //添加
sessionStorage.getItem('b') //获取

除了 SessionStorage 在用户关闭页面 (会话结束) 后就会失效。其他特点与 LocalStorage 的特点基本一致

课题

Cookie 和 Session 的区别

一般来说Session 是基于Cookie实现的，因为Session 必须将 SessionID放在 Cookie中再发送给客户端(Session 依赖于Cookie)

Cookie 与 LocalStorage 的区别

• Cookie每次请求都会被浏览器带到服务器上 (HTTP会带上Cookie的值) ，但LocalStorage不会，因为LocalStorage 与 HTTP 无关。

• Cookie 一般最大的大小只有4k 左右，但LocalStorage 最大存储量为 5Mb 左右 (每个浏览器都不一样)

Cookie 设置过期时间

response.setHeader('Set-Cookie', 'Max-Age=30') // 单位秒

清除Cookie

首先引入MDN中一个小框架：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie

如图：

cookie-clear.png

然后调用

docCookies.removeItem(name) // name 输入要清除的cookie的key即可

LocalStorage 和 SessionStorage 的区别

区别就是 SessionStorage 在用户关闭页面 (会话结束) 后就会失效。而 LocalStorage 理论上永久有效，除非你将浏览器的缓存清理。

Cache-Control: max-age=1000 缓存 与 ETag 的「缓存」有什么区别？

Cache-Control: max-age=1000 缓存 设定在1000秒后必须重新加载缓存，在此期间不需要重新请求。 而 ETag 的「缓存」是通过对比MD5判断本地文件与服务器文件有无变化，只有有变化才会重新下载文件。ETag的 缓存 有请求有响应，但是只有本地文件与服务器文件有变化时才会重新加载响应。

ETag

请求判断文件的MD5是否与原来的相同，相同则不响应

缓存与 302 的区别

缓存没有请求，304 有请求有响应，但没有响应第四部分