Cookie && Session && localStorage && sessionstorage && HTTP缓存

什么是cookie

1. 服务器经过 Set-Cookie 头给客户端一串字符串
2. 客户端每次访问相同域名的网页时，必须带上这段字符串
3. 客户端要在一段时间内保存这个Cookie（windows C盘某文件）
4. Cookie 默认在用户关闭页面后就失效，后台代码能够任意设置 Cookie 的过时时间
5. 设置过时时间：response.setHeader('Cache-Control',' max-age=<seconds>
6. 大小大概在 4kb 之内
7. 前端永远不要 读/写 cookie，用localStorage。
8. 删除 Cookie: 设置 → 清除浏览器数据 → 高级 勾选cookie及其余网站数据,点击清除数据便可

---

什么是 session

1. 将 SessionID（随机数）经过 Cookie 发给客户端
2. 客户端访问服务器时，服务器读取 SessionID
3. 服务器有一块内存（哈希表）保存了全部 session
4. 经过 SessionID 咱们能够获得对应用户的隐私信息，如 id、email
5. 这块内存（哈希表）就是服务器上的全部 session
6. session最大的问题就是 占内存 ！

• 不基于 cookie 的 session ：服务器直接返回 sessionId ，前端直接把 sessionId 放到localStorage，当访问主页时，把sessionId当作查询参数传递给服务器。即 Session 能够用 LocalStorage + 查询参数实现（超纲）

---

什么是 localStorage （持久化存储）

localStorage 是html5 提供的一个API，实质是一个哈希表。（session是服务器的哈希表，localStorage是浏览器的哈希表）

特色：

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

方法：

localStorage.clear(): 不接受参数，清空 localStorage
localStorage.getItem('参数1-key'): 接受一个参数，返回该参数对应的值。
localStorage.setItem('参数1-key', '参数2-value'): 接受两个参数，向 localStorage 内存储信息。

---

什么是 sessionstorage（会话存储）

一、二、三、4 同
5. SessionStorage 在用户关闭页面（会话结束）后就失效。
其余全部特性都与 localStorage 同样，方法也同样。

---

HTTP缓存

Cache-Control 是什么

通常首页不要设置Cache-Control，尤为是html。
只有相同的URl，浏览器才会去读取Cache。
当页面升级时，就改变URL，这样就能够经过首页这个接口让浏览器下载到最新的内容。

功能：

1. 可让浏览器在必定时间内不访问服务器，直接用本地内存/硬盘响应，加快访问速度。
2. 若是要升级，只须要在入口处（html文件）把URL稍微变一下，浏览器就会去下载最新版，并缓存下来。

补充：

浏览器缓存详解:expires,cache-control,last-modified,etag详细说明

Expire 是什么：

Expire 是设置 何时过时，给了一个时间；可是这个时间是本地时间，若是本地时间错乱就会出错。
Cache-Control是新的API，取代了Expire，可是面试官会问。

MD5 是什么

MD5 是一个摘要算法。它把一个文件变成一个字符串，当这个文件被篡改，再次计算 MD5 值就会发生变化。好比下载文件，就可也比较双方 MD5 值来肯定下载的文件是否正确。 MD5 会将小的差别扩大化，越小的差别，获得的 MD5 字符串差别就越大。

MD5 和 HTML 有什么关系呢？ 就要看 ETag 。

ETag 是什么

ETage能够给一个资源一个内容。

使用Cache-Control 是根本就不发请求；
用ETag是发请求，可是响应没有第四部分（不下载），且代码为304。

---

面试一： cookie 与 session 有什么关系？

1. 通常来讲，session 是基于 cookie 实现的，由于 session 必须把 sessionId 放在 cookie 里，没有 sessionId ，就没有 session 。

面试二： cookie 与 localstorage 的区别是什么？

1. 每次请求的时候都会把 cookie 带给服务器，而 localStorage 不会带给服务器。由于 localStorage 与 http 无关。
2. cookie 通常是 4kb， localStorage 通常是 5mb。

面试三： localStorage 和 sessionstorage 有什么区别？

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

小知识

1. ({}).toString() -> '[object, Object]'
   任何一个对象转换成字符串，都是变成这种形式。
   想要存对象，就使用json:
   localStorage.setItem('jsonString, JSON.stringify({name:'obj'}))