HTML5的离线储存怎么使用，以及工作原理_随笔

原理：HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

方法：

1.在index.html里加上<html manifest="test.manifest">

2.manifest清单格式如下：

CACHE MANIFEST

#上面一句必须

#v1.0.0

#需要缓存的文件

CACHE:

a.js

b.css

#不需要缓存的文件

NETWORK:

#无法访问页面

FALLBACK:

404.html

3.manifest文件的mime-type必须是 text/cache-manifest类型。

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储 (关闭浏览器依然存在）

sessionStorage - 针对一个 session 的数据存储（关闭浏览器后即清空）

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

欢迎分享，转载请注明来源：内存溢出

HTML5的离线储存怎么使用，以及工作原理