浏览器的WebStorage存储与缓存
WebStorage存储机制：
一、功能概述
|
存储方式 |
localStorage |
sessionStorage |
|---|---|---|
| 概述 | 将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。 |
将数据保存在session对象中。 所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。 session对象可以用来保存在这段时间内所要求保存的任何数据。 |
| 生命周期 | 生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失，除非主动删除数据，否则数据永远不会消失。 |
sessionStorage是在同源的窗口中始终存在的数据，并且仅在当前会话下有效。 只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。 反之，数据销毁。 |
| 存储大小 | 5MB | 5MB |
| 存储位置 | 客户端（不与服务端通信） | 客户端（不与服务端通信） |
| 存储内容类型 | 字符串 | 字符串 |
| 获取方式 | window.localStorage | window.sessionStorage |
二、工作实例：
工作中，我们在做银联跳转支付功能时，需要从自身商户页面跳转到银联的支付页面，当支付成功后再返回商户的订单完成页。
银联支付页与我们的页面是不同源的，无法进行storage资源共享。
那么，如何在银联回调订单完成页的时候，仍然可以获取到本身的订单信息，我们可以用存储在sessionStorage的方式。
关于同源：
https://www.test.com （不同源，因为协议不同）
http://my.test.com（不同源，因为主机名不同）
http://www.test.com:8080（不同源，因为端口不同）
示例：
1、首先我们随机打开一个网页，如在https://www.cnblogs.com/pengc/p/8714475.html网页中设置一个{key:value}为{‘test’:'123'}存在sessionStorage中。
2、这时我们在这个页面执行window.location.href = 'http://www.baidu.com'进行跳转到一个不同源页面
发现原本的{‘test’:'123'}已经消失了。
3、我们点击回退按钮或者window.location.href = 'https://www.cnblogs.com/pengc/p/8714475.html'到原页面
发现{‘test’:'123'}又出现了
4、我们关闭浏览器，或者在一个新的浏览器窗口打开https://www.cnblogs.com/pengc/p/8714475.html，存储也都会消失。
总结：
综上所述，浏览器的sessionStorage是存储在当前页面下的，同源页面之前可以共享，当切换到不同源页面时sessionStorage会消失，但是在回到原本页面时还是会存在，除非关闭浏览器，或者打开一个新的浏览器窗口，存储才会消失。
浏览器缓存：
一、强缓存
强缓存不经过服务端，直接去使用缓存。
在请求一个文件的时候，http响应头中会有以下信息：
1、Expires expires: Fri, 01 Jan 1990 00:00:00 GMT 表示服务器下发的绝对时间。（当服务端时间与客户端不一致时，用expires的判断便会出错）
2、Cache-Control Cache-Control: max-age=3600 相对时间，表示在拿到资源后的3600s内不会再去访问服务器。
问：如果服务器同时返回了Expires和Cache-Control，以哪个为准？
答：规定以Cache-Control为准。
二、协商缓存
协商缓存先询问服务端，判断缓存是否过期，来决定是否使用缓存。
浏览器优先判断强缓存，若强缓存失效（超过了文件下发的时间），则使用协商缓存的方式去询问，缓存生效则返回304或者not modified。
1、Last-Modified last-modified: Sun, 10 Nov 2019 15:50:37 GMT 存在与响应头中，是该请求文件上次修改的时间，由服务器下发。
2、if-Modified-Since if-modified-since: Sun, 10 Nov 2019 15:50:37 GMT 存在与请求头中，在一个文件发起请求的时候会带上该文件的Last-Modified值，服务器对比修改时间是否一致，如果不一致则不适用缓存。
问：若修改时间发生了变化，但是文件本身没有变化，该如何判断？
答：使用Etag的方式。
3、Etag etag: "1d597de983de6ac" 存在与响应头中，是一串hash值，用于比较文件本身是否有变化。
4、if-None-Match if-none-match: "1d597de983de6ac" 在请求的时候带上服务器返回的Etag值，由服务器去比对，如果一致则不使用缓存。
（关于浏览器缓存请求头的具体配置可查阅相关资料）
三、缓存优先级
Cache Control > Expires > Etag > Last-Modified
四、存储位置
1、Memery Cache 缓存在内存中，资源为脚本、字体、图片、关闭页面释放缓存。
2、Disk Cache 缓存在磁盘中，资源为非脚本，如css，开销相对与memery cache较小。