在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。
原理: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进行需求实现。

HTML5离线存储的工作原理和使用的更多相关文章

  1. HTML5离线存储原理

    找到一篇介绍离线缓存的,感觉比之前看到的解释的更透彻,新的知识点记录如下: 大家都知道Web App是通过浏览器来访问的,所以离线状态下是无法使用app的.其中web app中的一些资源并不经常改变, ...

  2. 神奇的HTML5离线存储(应用程序缓存)

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...

  3. 利用Node实现HTML5离线存储

    前言 支持离线Web应用开发是HTML5的一个重点.离线Web应用就是在设备不能上网的时候仍然可以运行的应用.开发离线Web应用需要几个步骤,其中一个就是离线下必须能访问一定的资源(图像 JS css ...

  4. 吓哭原生App的HTML5离线存储技术,却出乎意料的容易!【低调转载】

    吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥 ...

  5. html5 离线存储

    在html页面中引入manifest文件 <html manifest="sample.appcache"> 在服务器添加mime-type text/cache-ma ...

  6. html5 离线存储 worker

    html5 离线存储 <!DOCTYPE html> <html manifest="cache.manifest"> <!--manifest存储- ...

  7. 【html5】html5离线存储

    html5本地存储之离线存储 1.为什么使用离线存储 ①最新的主流的浏览器中都已添加了对HTML5的offline storage功能的支持,HTML5离线存储功能非常强大, 它的作用是:在用户没有与 ...

  8. html5离线存储

    为了提升Web应用的用户体验,我们在做网站或者webapp的时候,经常需要保存一些内容到本地.例如,用户登录token,或者一些不经常变动的数据. 随着HTML5的到来,出现了诸如AppCache.l ...

  9. HTML5离线存储和本地缓存

    一.离线存储 有一个web应用有三个文件index.html,a.js,b.css,现在需要把js和css文件缓存起来 1.在index.html里加上<html manifest=" ...

随机推荐

  1. PyTorch in Action: A Step by Step Tutorial

    PyTorch in Action: A Step by Step Tutorial   PyTorch in Action: A Step by Step Tutorial Installation ...

  2. centos 增强功能安装失败

    centos 共享目录设置失败 /sbin/mount.vboxsf: mounting failed with the error: No such device 准备安装增强功能 [root@lo ...

  3. hiberate 映射关系 详解

    在我们平时所学的关系型数据库中,我们会大量处理表与表之间的关系,如果表比较多的话处理起来就比较繁琐了,但是hibernate给我们提供了很大的便利,这些便利让我们处理起来方便.我们所讲的源码地址:ht ...

  4. 使用grafana provisioning通过配置方式添加datasource和dashboard

    grafana provisioning grafana provisioning (http://docs.grafana.org/administration/provisioning/#prov ...

  5. topcoder srm 635 div1

    problem1 link 首先枚举长度$L$.然后计算每一段长度$L$的差值最大公约数,然后差值除以最大公约数的结果可以作为当前段的关键字.然后不同段就可以比较他们的关键字,一样就是可以转化的. p ...

  6. git Remote: HTTP Basic: Access denied Git failed with a fatal error.

    解决方案: git clone 项目失败,报下面的错误信息: $ git clone http://192.168.0.141/xxxx.git Cloning into 'appEnterprise ...

  7. yaf框架在windows上的环境配置和安装

    1.首先检测你的php版本 如图:Architecture:×86和thread Safety:disabled 这个有什么用呢? 2.进入这个网站 tgz是linux下的扩展包,windows下点D ...

  8. RFS常见问题

    一.DatabaseLibrary 库遇到的问题:1,连接mysql库,查询语句带有中文,报FAIL UnicodeEncodeError: 'latin-1' codec can't encode ...

  9. php动态获取网页图片路径~

    <?phpheader("Content-type:text/html;charset=utf-8"); 请求的url $url = 'http://dsc.taobaocd ...

  10. PyQt5——高级控件

    PyQt5高级控件使用方法详见:https://blog.csdn.net/jia666666/article/list/4?t=1& PyQt5高级控件汇总: 1.QTableView 2. ...