LocalStorage、SessionStorage、Cache-Control

LocalStorage方法：getItem()、setItem()、deleteItem() 

LocalStorage特点：

①LocalStorage 跟HTTP无关，HTTP不会带上LocalStorage的值。

②只有相同域名的页面才能互相读取LocalStorage（没有同源严格）。

③每个域名的LocalStorage最大存储量为10M左右。（浏览器有差异）。

④永久有效，除非用户清理缓存。

LocalStorage常用场景：记录有没有提示过用户某些通知，例如更新、出了什么新功能等(不能记录密码)

---

---

SessionStorage方法：getItem()、setItem()、deleteItem() 

SessionStorage(会话存储) 特点：

①②③跟LocalStorage相同，④用户关闭页面后SessionStorage失效。

⑤SessionStorage不支持多窗口共享。

---

---

HTTP缓存 - Cache-Control

在服务器响应头中设置Cache-Control后，在规定时间内访问相同URL时，请求被中断（请求没有发出去），浏览器直接从本地缓存中读取数据。例如：response.set-header('Cache-Control','max-age=30')

首页(HTML)不能设置Cache-Control，要预留一个通道，Cache-Control一般情况下设置一年。如果网页更新，可以更改url，让用户下载新的资源，如下图

---

Expires是旧版的HTTP缓存，用法：response.set-header('Expires','Wed, 21 Oct 2015 07:28:00 GMT')，跟上面的区别就是Cache-Control设置时间长度，Expires设置时间点(格林威治时间)。

Etag用法：response.set-header('Etag',MD5)，请求时如果文件相同，只返回响应头，没有响应体。

---

---

Cookie与LocalStorage的区别： 

①每次访问服务器时，Cookie都会被带到服务器，而LocalStorage不会。

②Cookie的最大存储量大概为4k，LocalStorage为10M。

③Cookie默认关闭页面后失效，而LocalStorage永久有效。(不考虑人为因素)