在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。
原理: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. 通过Shell脚本将VSS项目批量创建并且提交迁移至Gitlab

    脚本运行环境:Git Bash 系统环境:Windows 10 Pro 1709 VSS版本:Microsoft Visual SourceSafe 2005 我的VSS工作目录结构如下: D:\wo ...

  2. httplib和urllib2常用方法

    都是几年前用过的,现在翻出来记录一下. import httplib import urllib2 import socket ##---------------------------------- ...

  3. msgid 属性

    Android源码中的String.xml文件,msgid这个属性是干嘛的? 全局资源,方便引用.比如在布局的text和activity中用到.

  4. GreenDao教程2

    总述: 所有的增删改查都需要通过greendao通过实体对象类生成的Dao来实现, 具体实现如下图 1.初始化数据库操作对象(GreenDao自动生成的操作对象) 2.通过数据库操作对象,进行增删改查 ...

  5. Bootstrap3基础 栅格系统 1行最多12列

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  6. jenkins 配置

    配置: echo " aliyun.oss.access.key=LTAIz4Koeff8sCr8 " > ./src/main/resources/oss.dev.prop ...

  7. 使用MySQL workbench 和Excel表之间的数据互相导出

    导出数据是很常用的功能,但今天在操作时遇到了一点问题,记录下来,方便其他人查阅. 1. 使用MySQL workbench 导出数据 在workbench里连接好数据库之后直接点击左侧的managem ...

  8. 让小乌龟可以唱歌——对Python turtle进行拓展

    在Scratch中,小猫是可以唱歌的,而且Scratch的声音木块有着丰富的功能,在这方面Python turtle略有欠缺,今天我们就来完善一下. Python声音模块 Python处理声音的模块很 ...

  9. 【VS工具】vs2017中的一些小功能

    一.json转为类 1.打开一个json文件,复制 2.打开一个.cs文件,将json粘贴为类 3.got it 二.C#交互窗口 1.视图->其他窗口->C#交互窗口  2.打开了一个窗 ...

  10. day23

    ## 复习 4.类与对象的语法class 类名: 代码块(一堆属性与方法)对象名 = 类名() 变量 | 函数 => 属性 | 方法:前者直接使用,通过所属者.语法调用 类会随所属文件加载而加载 ...