Web缓存机制

Web 缓存的出现主要是为了弥补cookie带来的一些局限，当数据严格控制在客户端时，可以不用通过HTTP来持续得将数据发给服务器。

主要使用比较多的就是sessionStorage和localStorage，这两种都是Storage类型，Web Storage提供一个Storage类型，它有下面这么写方法：
getItem(item);
setItem(item, value)
removeItem(item)
所以sessionStorage和localStorage都可以调用上面的方法。

SessionStorage

sessionStorage.setItem("Age", 20);SessionStorage 仅在会话期间有效关闭浏览器或页面其值就会被清除，存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

当关闭该页面，重新访问时（没有了设置sessionStorage），此时在Application里的SessionStorage并没找到Age这个缓存，说明Session Storage是基于会话的，也就是说当前页面关闭之后，session Storage就消失了。
localStorage

localStorage.setItem("Age", 20);

LocalStorage 的生命周期是永久的，除非localStorage.removeItem("Age");否则LocalStorage内的信息将永久存在；存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

当浏览器关闭，重新打开时，看到localStorage中还有Age这个缓存，因此localStorage是永久缓存的，除非手动清除，否则它会一直存在，上图中的musics,searchHistory等等正说明了这一点。
清除localStorage可以调Storage类型的接口：

localStorage.removeItem("Age");

LocalStorage  与SessionStorage

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。