HTML5离线存储

应用程序缓存的优势

  • 离线也可以浏览
  • 资源加载速度更快
  • 减少服务器负载

html中加入

<html manifest="cache.appcache">

cache.appcache文件中写

CACHE MANIFEST
//离线的资源列表
img/1.jpg

//只有在线才能访问
NETWORK:

//如果第一个资源访问失败,就替换第二个资源
FALLBACK:
/ /404.html

开始,我以为是把在线的资源离线缓存到本地,没联网也可以访问,所以在index.html中引用了在线图片,在浏览器打开,没网不能显示,报错[Application Cache Error event: Manifest fetch failed (404),后来加了服务器,才发现是缓存的资源,在服务器关闭时也可以访问

demo地址

参考文章推荐:
HTML5离线存储原理

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。HTML5...
    IT小C阅读 438评论 0 1
  • 转载:H5缓存机制浅析-移动端Web加载性能优化【干货】 作者:贺辉超,腾讯游戏平台与社区产品部 高级工程师 目录...
    meng_philip123阅读 11,567评论 6 48
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,923评论 18 139
  • HTML5新增了离线应用,离线应用使得我们可以在网页或应用在没有网络的情况下依然可以使用。离线应用的使用需要以下几...
    SuperSnail阅读 7,014评论 2 15
  • 非常感谢编辑给的意见,在这里我将我所有的文章汇总做了一下分类整理。 感谢你的点击哦,如果感兴趣你可以点开看看哦! ...
    又又姑娘阅读 459评论 0 1