浅谈：HTML5缓存机制原理

HTML5提供了一种离线存储，也可称为缓存机制，它是HTML5中一个非常重要的特性，使得网页应用可以离线使用，并且可以在没有英特网连接的时候进行访问。根据标准，截止到目前为止，HTML5一共有6种缓存机制，可能有些事之前旧有的，但是有些事HTML5刚刚新加的，而具体都有哪些让让我们虽天津app开发了解一下吧！

⑴种：浏览器

所谓游览器缓存机制简单的来说，就是指通过HTTP协议里的Cache-Control和Last-Modified等字段来控制文件缓存的机制。其实，这算是WEB中较早的缓存机制了，是在HTTP协议中实现的，虽然有点与Dom Storage、AppCache等缓存机制不同，但严格来说本质上没有太大区别，可以将其理解为一个协议层实现的，一个是应用层实现的。　　Cache-Control 通常与 Last-Modified 一起使用。一个用于控制缓存有效时间，一个在缓存失效后，向服务查询是否有更新。

第二种：Dom Storage

Dom Storage 是通过存储字符串的 Key/Value 对来提供的，并提供 5MB （不同浏览器可能不同，分 HOST)的存储空间（Cookies 才 4KB)。另外 Dom Storage 存储的数据在本地，不像 Cookies，每次请求一次页面，Cookies 都会发送给服务器。目前分为 sessionStorage和 localStorage。sessionStorage 用来存储与页面相关的数据，它在页面关闭后无法使用；ocalStorage 则持久存在，在页面关闭后也可以使用。

第三种：6File System API

File System API是一种可选的缓存机制，有属于自己特定的优势，属于HTML5新加入的存储机制，它为Web App提供了一个虚拟的文件系统，就像Native App访问本地文件系统一样。由于安全性的考虑，这个虚拟文件系统有一定的限制，Web App 在虚拟的文件系统中，可以进行文件（夹）的创建、读、写、删除、遍历等操作。

具体特定优势如下：

A、可以满足大块的二进制数据（large binary blobs）存储需求。

B、可以通过预加载资源文件来提高性能。

C、可以直接编辑文件。

第四种：Indexed Database

IndexedDB是一种数据库的存储机制，已经不再是传统的关系数据库，不支持Web SQL Database，可将其归为 NoSQL数据库。IndexedDB类似于Dom Storage的 key-value 的存储方式，但相比来说又比他们的功能、存储空间都更大些。IndexedDB提供了一组API，可以进行数据存、取以及遍历，这些API都是异步的，操作的结果都是在回调中返回。

第五种；Web SQL Database

HTML5也提供基于SQL的数据库存储机制，用于存储适合数据库的结构化数据。根据官方的标准文档，Web SQL Database 存储机制不再推荐使用，将来也不再维护，而是推荐使用 AppCache 和 IndexedDB。现在主流的浏览器都还是支持 Web SQL Database存储机制的。Web SQL Database存储机制也提供了一组API主要事供Web App创建、存储、查询数据库。

第六种：Application Cache

Application Cache简称 AppCache，似乎是为支持 Web App离线使用而开发的缓存机制。它的缓存机制类似于浏览器的缓存（Cache-Control 和 Last-Modified）机制，都是以文件为单位进行缓存，且文件有一定更新机制。但值得注意的是AppCache是对浏览器缓存机制的补充，不是替代。

好了，以上的就是HTML5缓存机制原理，你看懂了吗？若您想要了解更多、更深层次的HTML5开发知识，欢迎随时来天津app开发的官网http://www.wenshuai.cc/查阅哦！