浏览器本地存储(Application\Storage\Cache)

1．Application Cache应用程序缓存（manifest）

为了支持Web App离线而开发的应用程序缓存（Application Cache，App Cache）。该缓存类似于浏览器缓存，都是进行文件缓存，而且缓存文件有一定的更新机制。可以通过配置manifest文件来使用应用程序缓存，配置文件中包括CACHE、NETWORK和FALLBACK，CACHE用来指明缓存入口，NETWORK用来指明哪些资源必须在线访问，FALLBACK用来指明错误文件，如index.html无法访问时则用404.html代替。

这个过程中有几个问题需要注意：
如果服务器对离线的资源进行了更新，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。
对于manifest文件进行缓存的时候需要十分小心，因为可能出现一种情况就是当对manifest文件进行了更新，但是http的缓存规则告诉浏览器本地缓存的manifest文件还没过期，这个情况下浏览器还是使用原来的manifest文件，所以对于manifest文件最好不要设置缓存。
浏览器在下载manifest文件中的资源的时候，它会一次性下载所有资源，如果某个资源由于某种原因下载失败，那么这次的所有更新就算是失败的，浏览器还是会使用原来的资源。
在更新了资源之后，新的资源需要到下次再打开app才会生效，如果需要资源马上就能生效，那么可以使用window.applicationCache.swapCache()方法来使之生效，出现这种现象的原因是浏览器会先使用离线资源加载页面，然后再去检查manifest是否有更新，所以需要到下次打开页面才能生效。
总结下来，有三种方法更新应用程序缓存文件。用户清空浏览器缓存、修改manifest文件、用程序来更新缓存。

2． Web Storage（Session Storage和Local Storage）

Web Storage分为Session Storage和Local Storage，是本地持久化存储。本地化持久存储用来存储一些不需要让服务器知道的信息，用来替换Cookies这咱传统的方法。Session Storage 和 Local Storage 是HTML5中作本地数据缓存用的，可以用来避免浏览器和服务器之间不必要地来回数据的传递，并且可以快速显示数据；用它作数据的临时存储也是可以的。都是通过Key/Value的形式来存储字符串，并提供5MB的存储空间，不同的浏览器存储空间可能会有区别。Local Storage和Session Storage的使用方法差不多，区别在于作用范围不一样。Local Storage可以持久保存数据，在页面关闭后也可以使用，除非用户手动删除；而Session Storage在页面关闭后无法使用，用来存和页面相关的数据。

3． 数据库（Web SQL Database和Indexed Database）

Web SQL Database，它使用 SQL 来操纵客户端数据库的API，这些API是异步的。当前的SQL规范采用SQLite的SQL方言，而作为一个标准，每个浏览器都有自己的实现，标准不统一。该规范已经被废弃，官方的标准文档不再维护，所以该缓存机制不推荐使用，而是推荐使用应用程序缓存和Indexed DB。

Indexed Database (IndexedDB)是一种数据库的存储机制。它与Web Storage类似，都是用简单字符串键值对在本地存储数据，方便灵活，存储空间更大，可以进行数据存、取和遍历同时也可以用索引进行高效的检索。IndexedDB集合了Web Storage和Web SQL Database的优点，可以存储更大量（默认推荐250MB）和更复杂结构的数据，使用起来也非常简单。通过数据库的事务机制处理数据，保证了数据的一致性，异步调用，速度更快，但是它不适合存储静态文件。

4． Cache Storage

前面说过 Session Storage和Local Storage，现在还有个神奇的 Cache Storage。它用来存储 Response 对象的。也就是说用来对 HTTP 响应，做缓存的。虽然 Local Storage也能做，但是它可能更专业。

Cache Storage 在浏览器上的引用名叫 caches 而不是驼峰写法的 Cache Storage，它定义在 Service Worker 的规范中。Cache Storage 是多个 Cache 的集合，而每个 Cache 可以存储多个 Response 对象。

缓存机制对比表

缓存机制	特点	适用场景
浏览器缓存(详情见上一篇文章)	HTTP协议层支持	静态文件的缓存
Application Cache	方便构建离线App	离线App，静态文件的缓存
Local Storage	更大存储量、更安全、更便捷；持久存在，在页面关闭后也可以使用	存储文本类型的信息和数据或用户个性化设置数据
Session Storage	页面关闭后无法使用，更大存储量、更安全、更便捷	存储与页面相关的数据，如恢复在表单中已经填写的数据
Web SQL	存储、管理复杂结构数据	用IndexedDB替代，不推荐使用
IndexedDB	存储任何类型数据，使用简单，支持索引	结构、关系复杂的数据存储
Cache Storage	存储Response 对象，和Service Worker配合使用	离线

表格在手，浏览器缓存不愁！