首页技术文章正文

HTML5的离线存储怎么使用,工作原理是什么?

更新时间:2021-05-10 来源:黑马程序员 浏览量:

1577370495235_学IT就到黑马程序员.gif

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

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


如何使用:

1、页面头部像下面一样加入一个manifest的属性;

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

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

3、在离线状态时,操作window.applicationCache进行需求实现。



猜你喜欢:

HTML中的src与href属性有哪些区别?

HTML5画布中线的样式是怎样设置的?

XML和HTML有什么区别和不同?

HTML5页面头部信息相关标签是如何编辑的?

黑马程序员前端培训课程

分享到:
在线咨询 我要报名
和我们在线交谈!