localStorage的一些用法详解

1、说实话这个东西没必要讲的，想要学习的话可以百度一下都可以找的到，我这里就简单的说一下需要注意的一些事情，在setItem时，可能会达到大小限制，最好加上错误捕捉：

2、另外就是在存储容量快要满的时候，会造成getItem的性能急剧下降，这也是需要注意的一点。

1、因为请求都是动态发出的，所以我们可以对请求拦截处理。

进行的大致流程如下图：

（推荐使用这个方式有个开源库：basket.js）

1、在第一次响应的时候把需要放入localStorage 的文件都内联在html中，后面每次响应只要文件版本没有变化，都是渲染一段从localStorage加载该文件的代码。

注：这种方式比上述的方式要好一些

2、版本号不匹配（版本号可记在Cookie中，第一次访问没有版本号），服务端响应内容：

3、版本号匹配，服务端响应内容：

1、这时候可能会有小伙伴要说，不是有postMessage吗？使用postMessage不就可以用于窗口或iframe之间的通信吗？但是使用postMessage的前提是你必须能够拿到打开新窗或iframe的句柄对象：

2、那么同源窗口之间通信的原理是什么？

其实原理也简单，每次localStorage中有任何变动都会触发一个storage事件，所有窗口都能够监听这个事件，一旦有窗口更新了localStorage，其他窗口也都会收到通知，根据事件中的key把不关心的变动过滤掉。

3、看到上面的原理之后是不是觉得很简单？除此之外你还要做到一些事情：