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

    hbase特点及简介: hbase源自于谷歌的三大论文之一 GFS -- hdfs MapReduce - MR BigTable - hbase hbase在以Hadoop为基础的生态圈中的地位 h ...

  2. day10-11-python基础之字符串

    1.开发工具 python开发IDE: pycharm.eclipse # 专业版 # 不要汉化 2.运算符 结果是值 算数运算 a = 10 * 10 赋值运算 a = a + 1 a+=1 结果是 ...

  3. vue-loader的理解

    1.vue-loader是webpack的加载器,允许以单文件组件(SFC)的格式创作Vue组件 2.允许对Vue组件的每个部分使用其他webpack加载器 3.允许.vue文件中的自定义块可以应用自 ...

  4. 5.1JAVA基础复习——JAVA中的静态代码块、构造代码块、构造函数、局部代码块区别

    构造代码块: 在类中定义可以给所有对象进行初始化.局部代码块: 在方法中定义属性的生命周期.静态代码块: 在类中定义用于给类调用时属性的初始化 构造函数与构造代码块的区别: 构造函数是给对应的对象进行 ...

  5. 打印word文档时遇到标记区如何取消

           故障描述:word页面显示正常,打印以及打印预览的时候,页面上会出现部分暗色区域(标记区)        故障原因:简单标记惹的祸        解决办法:word菜单栏-审阅-简单标记 ...

  6. java基础学习之"堆" "栈" "静态存储区" "方法区"

    引用部分 java中堆栈(stack)和堆(heap)(还在问静态变量放哪里,局部变量放哪里,静态区在哪里.....进来) Java堆.栈和常量池以及相关String的讲解 等我看完"深入理 ...

  7. Maven下载与环境变量配置

    前言: Maven 是一个基于 Java 的工具,所以要做的第一件事情就是安装 JDK.如果还未安装 JDK,可以参考Win10下JDK下载与环境变量配置. 项目 要求 JDK Maven 3.3+ ...

  8. 开发者中心没有勾选 ipad却需要传宣传图片的解决方法

    1.通过模拟器 运行一个ipad 把ipad的比例调到100% 然后保存图片,如果没有适配ipad会出现上下左右黑色边框,这些不必在意,把保存的图片拖到开发者中心即可,勾选右侧 ,都使用12.9英寸图 ...

  9. _trigger

    -- 触发器设置-- 使用说明:-- 1.脚本名为TriggerScript,使用时添加该生物即可-- 2.可以控制玩家进入附近时是上马.下马.或者提示信息.

  10. 第二章 python变量及文件

    1.环境变量 1.配置环境变量不是必须的2.配置环境变量的目的:为终端提供执行环境 2.Python代码执行 1.交互式       -- 控制台直接编写运行Python代码       -- 1.打 ...