Cookie、Session、LocalStorage、Cach
Cookie
- 服务器通过 Set-Cookie 头给客户端一串字符串
- 客户端每次访问相同域名的网页时，必须带上这段字符串
- 客户端要在一段时间内保存这个Cookie
- Cookie 默认在用户关闭页面后就会失效 (后台代码可以任意设置 Cookie 的过期时间)
- Cookie 存储的大小一般在 4kb 以内
- 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
- 将 SessionID (随机数) 通过 Cookie 发给客户端
- 客户端访问服务器时，服务器读取 SessionID
- 服务器有一块内存 (哈希表) 保存了所有 session
- 通过 SessionID 我们可以得到对应用户的隐私信息，如 id、email
- 这块内存 (哈希表) 就是服务器上的所有 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 的特点：
-
LocalStorage 与 HTTP 无关
-
HTTP 不会带有 LocalStorage 的值
-
只有相同域名的网页才可以互相读取 LocalStorage (但没有同源策略那么严格)
-
每个域名 LocalStorage 最大存储量为 5Mb 左右 (每个浏览器都不一样)
//如何测试浏览器 LocalStorage 的最大存储: let a = '' for(let i = 0; i < 1000000; i++){ a += '嘤嘤嘤嘤嘤嘤嘤嘤嘤' } console.log(a.lenght) localStorage.setItem('xxx', a)
-
常用场景: 记录一些没有提示过用户 (比如只需要提示用户一次的更新信息)，以及一些没有用的信息 (不涉及隐私敏感信息的普通信息)
-
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 有请求有响应，但没有响应第四部分
