浏览器缓存技术--localStorage和sessionStorage原理与使用

LocalStorage

为了弥补 Cookie 的局限性，让“专业的人做专业的事情”，Web Storage 出现了。
HTML5中新增了本地存储的解决方案——Web Storage，它分成两类：sessionStorage和localStorage。这样有了WebStorage后，cookie能只做它应该做的事情了——作为客户端与服务器交互的通道，保持客户端状态。

LocalStorage的特点

保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据；
大小为5M左右；
仅在客户端使用，不和服务端进行通信；
接口封装较好。
基于上面的特点，LocalStorage可以作为浏览器本地缓存方案，用来提升网页首屏渲染速度(根据第一请求返回时，将一些不变信息直接存储在本地)。

存入/读取数据

localStorage保存的数据，以“键值对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。 存入数据使用setItem方法。它接受两个参数，第一个是键名，第二个是保存的数据。

localStorage.setItem("key","value");

读取数据使用getItem方法。它只有一个参数，就是键名。

var valueLocal = localStorage.getItem("key");

使用场景

LocalStorage在存储方面没有什么特别的限制，理论上 Cookie 无法胜任的、可以用简单的键值对来存取的数据存储任务，都可以交给 LocalStorage 来做。

这里给大家举个例子，考虑到 LocalStorage 的特点之一是持久，有时我们更倾向于用它来存储一些内容稳定的资源。比如图片内容丰富的电商网站会用它来存储 Base64 格式的图片字符串

sessionStorage

sessionStorage保存的数据用于浏览器的一次会话，当会话结束（通常是该窗口关闭），数据被清空；sessionStorage 特别的一点在于，即便是相同域名下的两个页面，只要它们不在同一个浏览器窗口中打开，那么它们的 sessionStorage 内容便无法共享；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。除了保存期限的长短不同，SessionStorage的属性和方法与LocalStorage完全一样。

sessionStorage的特点

会话级别的浏览器存储；
大小为5M左右；
仅在客户端使用，不和服务端进行通信；
接口封装较好。
基于上面的特点，sessionStorage 可以有效对表单信息进行维护，比如刷新时，表单信息不丢失。

存入/读取数据

写入：

sessionStorage.setItem("key2","value2");

读取

sessionStorage.getItem("key2");

使用场景

sessionStorage 更适合用来存储生命周期和它同步的会话级别的信息。这些信息只适用于当前会话，当你开启新的会话时，它也需要相应的更新或释放。比如微博的 sessionStorage就主要是存储你本次会话的浏览足迹：

lasturl 对应的就是你上一次访问的 URL 地址，这个地址是即时的。当你切换 URL 时，它随之更新，当你关闭页面时，留着它也确实没有什么意义了，干脆释放吧。这样的数据用 sessionStorage 来处理再合适不过。

sessionStorage 、localStorage 和 cookie 之间的区别

共同点：都是保存在浏览器端，且都遵循同源策略。
不同点：在于生命周期与作用域的不同
作用域：localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
生命周期：localStorage 是持久化的本地存储，存储在其中的数据是永远不会过期的，使其消失的唯一办法是手动删除；而 sessionStorage 是临时性的本地存储，它是会话级别的存储，当会话结束（页面被关闭）时，存储内容也随之被释放。

测试localStorage和sessionStorage

主要测试同源同界面，同源不同界面，同源不同窗口，不同源
数据填入
localStorage.setItem(“key1”,“value1”);
sessionStorage.setItem(“key2”,“value2”);
1、同源同界面
sessionStorage.getItem(“key2”);
‘value2’
localStorage.getItem(“key1”);
‘value1’
2、同源不同界面
localStorage.getItem(“key1”);
‘value1’
sessionStorage.getItem(“key2”);
‘value2’
依然存在
3、同源不同窗口
sessionStorage.getItem(“key2”);
null
localStorage.getItem(“key1”);
‘value1’
可以看到，新打开一个窗口，在同源不同窗口下，sessionStorage已经丢失，localStorage依然存在
4、不同源
localStorage.getItem(“key1”);
null
sessionStorage.getItem(“key2”);
null
两者都丢失了

总结：
两个都是在同源情况下会生效，localStoraged不是一个浏览器的全局变量，但是能对多个会话的同源网页是生效的
sessionStoraged是对当前窗口的当前会话生效，如果重新打开一个窗口就会丢失。
这两个要根据实际情况来确定选择。

IndexedDB

indexedDB 是一种低级API，用于客户端存储大量结构化数据(包括文件和blobs)。该API使用索引来实现对该数据的高性能搜索。IndexedDB 是一个运行在浏览器上的非关系型数据库。
既然是数据库了，那就不是 5M、10M 这样小打小闹级别了。理论上来说，IndexedDB 是没有存储上限的（一般来说不会小于 250M）。它不仅可以存储字符串，还可以存储二进制数据。