首页 > 技术文章 > Web缓存机制

JodNiki 2019-01-21 16:27 原文

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的。

推荐阅读