前言
前面讲完了HTTP缓存，今天继续讲浏览器存储。噢上一篇还漏了一个东西，service worker，但是这个东西虽然也是关于存储位置的，但是他更多的与国外很火的PWA联系在一起，PWA大家都懂的，所以放在这篇讲吧。
Cookie
明明有了HTTP缓存，那么多协议字段还没搞明白呢，为嘛H5又来了个WebStorage呢？其实它的出现主要是为了弥补使用 Cookie 作为本地存储的不足，和HTTP缓存关系并没有我们想象的那么紧密。
当没有网络的时候，应用无法访问，因为 HTML 页面总得去服务器获取。同时缓存不可编程，无法通过 JS 来精细地对缓存进行增删改查。
简单的说，本地存储可以实现更多的功能，甚至使web应用离线存在，cookie，webStorage等都具有这个功能。
关于Cookie我之前的文章也讲过，这里可以查看，服务器对任意的 HTTP 请求发送 Set-Cookie 首部字段作为响应的一部分，这之后，浏览器的每个请求都添加 Cookie 字段将信息发送回服务器。服务器就知道你是属于哪个用户了。因此Cookie是客户端存储的，但是是服务器生成的。但是由于数据传输会cookie是绑定的，自然我们不能在cookie中存储敏感信息。
噢还有一点，cookie只有4k。
WebStorage
Web Storage 是 H5 的一部分，目的是克服由 cookie 带来的一些限制，写过RN的同学们应该没少用，但是似乎web端使用的比较少一些，比如React状态管理或是使用Redux或者使用Hooks实现一个简单的Redux功能，似乎还都够用。
但是我们还是要知道这个玩意的，毕竟面试会问。。。
Web Storage 提供两种用于存储数据的对象，sessionStorage 对象和 localStorage 对象。前者因为只保持到浏览器关闭，而且必须要在同一标签页下，所以用的比较少。后者则到了广泛应用。我们打开调试工具，application里面就可以看到：
具体的API就不介绍了，主要带大家捋清楚这些概念。
IndexedDB
IndexedDB，看名字就知道了，这是个数据库，感兴趣的自己研究吧：
要细说的话，IndexedDB好像比Local Storage大一点，然后也没啥好处了，相比cookie，这几个存储方法都不需要与服务端通信，所以不会影响请求性能。
Service Worker
最后说一下Service Worker，如果你使用过CRA创建React应用，那么service worker这个词你一定见过，他有什么不同呢？简单的讲Service Worker 是一个常驻在浏览器中不同于JS引擎线程的另一个JS线程，他与各种APiece搭配完成PWA的所有功能，并不是说他本身就能做离线应用，甚至他自身其实只是在Webstorage上面的一个延申而已。
