html5选择本地路径保存,HTML5的离线存储

什么是HTML5 的离线存储？

HTML5提供了很多新的功能以及相应的接口，离线存储就是其中的一个，离线存储可以将站点的一些文件存储在本地，在没有网络的时候还是可以访问到以缓存的对应的站点页面，其中这些文件可以包括html，js，css，img等等文件，但其实即使在有网络的时候，浏览器也会优先使用已离线存储的文件，返回一个200(from cache)头。这跟HTTP的缓存使用策略是不同的。

怎么使用HTML5的离线存储？

首先，你得告诉浏览器你想要离线存储哪些文件，那就需要有一个缓存文件清单，这跟文件是一个manifest后缀名的文件，注意，使用HTML5的离线存储就必须有这个文件，而且必须在服务器端做修改，使得.manifest后缀名的文件的mime类型为text/cache-manifest。典型的一个文件清单类似下面这个，一定是以CACHE MANIFEST开头的：

CACHE: 指定你要浏览器进行离线存储的文件列表，一个文件一行

NETWORK: 跟CACHE相反,指定浏览器一定要通过网络访问的文件列表

FALLBACK: 如果通过网络访问失败了，就去访问紧跟着的那个在本地缓存好的文件文件

指定上述文件，可以用相对路径，也可以用绝对路径，都是ok的。但是绝对路径要加上http://

编辑好这个文件以后就在html文件中引入这个文件浏览器就可以知道要缓存那些文件了。

HTML5的缓存更新策略：

HTML5的缓存更新策略是由manifest清单是否为最新版本来决定的，所以浏览器首先会根据HTTP的缓存策略去探测manifest清单是否最新，如果最新(浏览器返回304)，则不会去下载清单里指定的缓存文件来更新离线存储，如果不是最新的(浏览器返回200)，则会根据最新的manifest清单去重新下载指定的一系列文件，然后更新离线存储。这里要注意，由于判断manifest清单是否最新是利用了HTTP的缓存策略的，所以可能出现你更改了manifest文件，但是离线存储却没有更新的情况，这可能是因为你的服务器为你的manifest清单文件设置了相应的缓存头，manifest清单文件还未过期，这是浏览器并没有真正向服务器发起请求确认manifest的新鲜度，而是直接使用了缓存的manifest文件，另外一个需要注意的是，修改了一些文件以后想要让离线存储更新，就必须改动manifest清单文件。

HTML5中对应的离线存储API：

支持H5离线存储的浏览器中存在一个对象叫window.applicationCache,在浏览器处理离线存储的期间，浏览器会触发各种事件具体如下:

checking事件：一旦你的浏览器注意到元素含有manifest属性，它将触发一个checking 事件。(所有这儿列出的事件均在window.applicationCache对象上触发。)checking事件总是被触发的，不管你之前是否访问过此页面，或者任何其它指向同一缓存名单的页面。

第一次访问指定了manifest的页面：

刷新页面：

有一种情况是没有指定manifest属性也会触发checking事件，那就是当当前访问页面是从离线存储中加载进来，如下图：

2. 如果你的浏览器不曾遇见过此缓存名单…

o 它将触发一个downloading事件，然后开始下载此缓存名单中列出的资源。

o 在下载的同时，你的浏览器将会周期性的触发progress事件，此事件包含了诸如多少文件已被下载，多少文件仍然处于下载队列等信息。

o 当缓存名单中所有列出的资源被成功下载后，浏览器触发最后的一个事件，cached。 这是你的离线网络应用程序被完整缓存并以备离线使用的标志。就这样，你完工了。

另一方面，如果你之前访问过此页面或者其他页面指向了相同的缓存名单，那么你的浏览器已经知道这个缓存名单。可能已经有一些资源在应用程序缓存中。可能全部工作的网络应用程序已在应用程序缓存中。现在的问题是，你的浏览器上次检测之后，缓存名单是否已经更改?

o 如果答案是没有，缓存名单没有更改，你的浏览器将会立即触发一个noupdate事件。就这样，你完工了。

如果答案是有，缓存名单已有更改，你的浏览器将会触发一个downloading事件，并开始重新下载缓存名单中列出的每个资源。

在下载的同时，你的浏览器将会周期性的触发progress事件，此事件包含了诸如多少文件已被下载，多少文件仍然处于下载队列等信息。

o 当缓存名单中所有列出的资源被成功重新下载后，浏览器触发最后的一个事件，updateready。这是你新版本的离线网络应用程序被完整缓存并以备离线使用的标志。新版本不会立即被使用。为了即刻使用新版本而不强制用户重载页面，你可以手动调用window.applicationCache.swapCache()函数。

更改manifest文件以后：

如果此过程中的任何一点出现可怕的错误，你的浏览器将会触发一个error事件，并立即终止。这是一个可能引发错误的完整且简短的列表：

• 缓存名单返回一个HTTP404错误(页面未找到)，或者410错误(永久消失)。

• 缓存名单被找到且没有更改，但指向名单的HTML页面没有正确下载。

• 缓存名单被找到且被更改，但浏览器没有下载某个缓存名单中列出的资源。

在manifest文件中的cache下增加一个不存在的文件后：

测试代码如下：

b.html：

a.html:

test.manifest：

404.html：

支持列表