清理localstorage_关于Cookie、Session、LocalStorage、Cache-Control（摘录）

关于Cookie、Session、LocalStorage、Cache-Control，在总结前先了解一个过程：当用户在一个浏览器注册账号再登录，客户端和服务器发生了什么？

一、发生了什么？

1、用户打开注册页面，提交信息（登录名、密码……）后，客户端获取用户输入的信息保存到hash表里，并发送post请求路由为/sign_up给服务器

2、服务器判断路由后进行接受数据（字符串）并将字符串转化为对象处理，保存到数据库（一个文件里），并告知用户注册成功了（后端设置返回响应，前端根据响应内容来呈现页面给用户）

3、用户打开登录页面，提交信息（登录名、密码……）发送post请求路由为/sign_in给服务器

4、服务器判断这次的提交信息（登录名、密码……）在不在数据库里。如果不在，那么告知用户去注册一个。如果在那么就将SessionID（随机数）通过cookie发给客户端。每一个SessionID对应了一个用户的信息，但返回的cookie是一个随机数，因为随机数可以提高保密度。

5、客户端再次访问服务器时，就会给带上这个cookie，发送get请求给服务器。服务器读取SessionID。

6、服务器通过SessionID找到对应用户的隐私信息，然后进行判断。如果确定是同一个用户，那么响应一个新的html文件（登录后的页面）给客户端

那么……

二、关于Cookie

Cookie是什么？举个例子：
小明（浏览器）第一次去公园（服务器）的时候，公园给了小明一张票（Cookie，包含了小明的信息）并告诉小明2天内（Cookie的有效时间）带着这个票可以免费的进出，次数不限。所以小明在这段时间内，每次去公园都得带上票。

1、Cookie的特点：

服务器通过 Set-Cookie 响应头设置 Cookie
浏览器得到 Cookie 之后，每次访问相同域名的网页时都要带上 Cookie
服务器读取 Cookie 就知道登录用户的信息（email）
大小在 4kb 以内

2、在A浏览器登录得到的Cookie，会在B浏览器带上A浏览器的Cookie吗？

3、Cookie 存在哪里？

存在 C 盘的一个文件里

4、Cookie会被用户篡改吗？

可以，但 Session 来解决这个问题，防止用户篡改

5、Cookie 有效期吗？

默认有效期20分钟左右，不同浏览器策略不同。后端可以强制设置有效期，具体语法看 MDN：

HTTP cookiesdeveloper.mozilla.org

6、Cookie 遵守同源策略吗？

也有，不过跟 AJAX 的同源策略稍微有些不同：

当请求 qq.com 下的资源时，浏览器会默认带上 qq.com 对应的 Cookie，不会带上 baidu.com 对应的 Cookie
当请求 v.qq.com 下的资源时，浏览器不仅会带上 v.qq.com 的Cookie，还会带上 qq.com 的 Cookie

既然如此，那为什么要设置Session?

因为用户可以修改Cookie,那么就可以用别人的身份发送请求获取响应……

二、关于Session

Session是什么？继续刚刚的例子：
由于其他人可以修改票的信息拿着这张票进公园，所以公园（服务器）把所有人的信息储存在一个本子里（内存），并给每一个人的信息设置对应的随机数字（SessionID）作为票（Cookie）给用户。那么小明拿到的票就不是自己的信息而是一串随机数。当进小明再次公园的时候，公园就会核对这串随机数与本子上记录随机数进行核对。如果准确就可以进去了。

所以Session就是：

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

sessions[hash.seesionId].name   //从内存里找到对应的ID,所对应的用户名

三、关于LocalStorage&SessionStorage

1、LocalStorage：

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

LocalStorage的三个API：

localStorage.setItem（key,value） // 创建一个hash
localStorage.getItem（key） //得到对应的value
localStorage.clear()    //清空

应用场景（用户第一次登录网页会提示“网页即将改版”，第二次登录就不会提示了）

let already = localStorage.getItem('已经提示过了')
if（！already）{alert('网页即将改版了')localStorage.setItem('已经提示过了',true)
}

2、SessionStorage（会话存储）：

SessionStorage 跟 HTTP 无关
HTTP 不会带上 SessionStorage 的值
只有相同域名的页面才能互相读取 SessionStorage （没有同源那么严格）
每个域名 SessionStorage 最大存储量为 5Mb 左右（每个浏览器不一样）
SessionStorage 在用户关闭页面（会话结束）后就失效。

四、Cache-Control（缓存控制）&Expires&ETag

1、Cache-Control是对HTTP进行缓存优化的

如果想给哪个请求设置缓存，就在服务器给相关请求返回的文件设置以下代码：

response.setHeader（‘Cache-Control’,‘max-age=30’）//对某个文件设置30秒内缓存

举了例子：

当Chrome浏览器第一次向服务器发送了一个路径为/main.js的请求
服务器响应一个xxx文本，浏览器下载了这个文本并保存在内存中
在30秒内Chrome浏览器输入同样的URL，内存返回了该文本
30秒之后Chrome浏览器第三发发送请求，服务器响应文本，浏览器下载并保存这个文本你在内存中
……

2、Cache-Control设置了时间，如何更新缓存？

首页不能设置Cache-Control，因为浏览器不允许，因为用户刷新后根本就不会向服务器发送任何请求。

一般其他会设置1-10年，如果中途发生改变可以更改文件请求的URL，只要URL变了就会发送新的请求。

3、Cache-Control与Expires的区别？

Cache-Control后面的时间是缓存多长时间

response.setHeader（‘Cache-Control’,‘max-age=30’）

Expires的后面几分几秒过期指的是本地时间，如果本地时间错乱了……

response.setHeader（‘Expires’,‘//GM的时间’）

4、Cache-Control与ETag 的区别？

每一个文件都会有一个对应的md5（摘要算法），如果文件有一丝丝的变动md5的值就会相差很大。啥是md5，点连接查看。

https://zh.wikipedia.org/zh-hans/MD5zh.wikipedia.org

在1-copy.txt改了一个数字得出的结果

那么使用ETag就会响应给客户端一个md5，当客户端下一次请求时会提交一个md5给服务器，服务器判断进行判断是否要响应一个文件给客户端。如果不需要响应文件，那么返回一个304给客户端。而Cache-Control是直接不请求。

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

五、几个问题

1、Cookie 和 Session 的区别？

Session是基于Cookie实现的，因为Session 必须将 SessionID（随机数）通过 Cookie 发给客户端。浏览器得到 Cookie 之后，每次访问相同域名的网页时都要带上 Cookie。

2、Cookie 和 LocalStorage 的区别？

客户端每次访问相同域名时会带上cookie，最大容量4k。而LocalStorage跟HTTP无关，所以不会带上LocalStorage的值，5Mb。

3、LocalStorage 和 SessionStorage 的区别？

LocalStorage 永久有效，除非用户清理缓存。SessionStorage在用户关闭页面（会话存储）后就失效了。

4、Cookie 如何设置过期时间？如何删除 Cookie？

Cookie设置过期时间：

Expires指定了一个日期/时间，在这个日期/时间之后 Cookie 过期
max-age指定了一个秒数，经过此秒数后 Cookie 过期
如果不设置这个标头，则默认关闭浏览器后 Cookie 过期

Cookie 的删除有不同方式：

服务器端可以通过设置 Expires、max-age 两个标签将 Cookie 设置为过期状态
JavaScript 可以通过document.cookie API 删除 Cookie

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

使用ETag就会响应给客户端一个md5，当客户端下一次请求时会提交一个md5给服务器，服务器判断进行判断是否要响应第四部分内容给客户端。如果不需要响应第四部分内容，那么返回一个304给客户端。而Cache-Control是在一段时间直接不请求。