浅述HTML5的离线存储-Toy模板网

这篇具有很好参考价值的文章主要介绍了浅述HTML5的离线存储。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

离线存储是什么？

离线存储就是在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

离线存储的原理：

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

使用方法：

1、创建一个和html同名的manifest文件，然后在头部加入mainfest属性

<html lang="en" manifest="index.manifest">

2、在cache.manifest文件中编写需要离线存储的资源

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

CACHE：表示需要离线存储的资源列表，由于包含manifest文件的页面将被自动离线存储，所以不需要把页面自身列出来。

NETWORK：表示它下面列出来的资源只有在在线的情况下可以访问，不会被离线存储。不过，如果在CACHE和NETWORK中有一个相同的资源，那么这个资源还是会被离线存储，因为CACHE的级别更高。

FAILBACK：表示如果访问第一个资源失败，那么就使用第二个资源来替换它。

3、在离线状态下，操作window.applicationCache进行离线缓存操作。

如何更新缓存：

1、更新manifest文件

2、通过js操作

3、清除浏览器缓存

注意：

1、浏览器对缓存数据的容量限制可能不一样

2、如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存

3、引用manifest的html必须与manifest文件同源，在同一个域下

4、FAILBACK中的资源必须与manifest文件同源

5、当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源

6、站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问

7、当mainfest文件发生改变时，资源请求本身也会出发更新

浏览器是如何对HTML5的离线存储资源进行管理和加载？

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问页面，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器就会去对比新的manifest与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果有改变，就会重新下载资源并进行离线存储。

离线的情况下，浏览器会直接使用离线存储中的资源。

文章来源地址https://www.toymoban.com/news/detail-846278.html

到了这里，关于浅述HTML5的离线存储的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！