44.HTML5的离线储存怎么使用,工作原理能不能解释一下?

HTML5的离线存储怎么使用,工作原理能不能解释一下?

1.在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件

原理:

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

如何使用:

  • 页面头部像下面一样加入一个 manifest 的属性;
  • cache.manifest文件的编写离线存储的资源
  • 在离线状态时,操作window.applicationCache进行需求实现
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/offline.html


作者:前端老司机
链接:https://www.jianshu.com/p/b541b7d1c66e
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
原文地址:https://www.cnblogs.com/dream111/p/13460953.html