html5本地存储之离线存储

1.为什么使用离线存储

①最新的主流的浏览器中都已添加了对HTML5的offline storage功能的支持，HTML5离线存储功能非常强大，

它的作用是：在用户没有与因特网连接时，照样可以访问站点或应用，在用户与因特网连接时，自动更新缓存数据，是我们的网站的适应性和应用型更强

2、准备工作

1.服务器配置

1.需要在 apache配置文件加：
① AddType text/cache-manifest .manifest

2.创建缓存清单文件xxx.manifest

格式如下

CACHE MANIFEST
####
CACHE:
01.html
1.css
1.js
NETWORK:
1.jpg
FALLBACK:

解释如下

① CACHE MANIFEST
# 这一句必须存在，而且必须放在头部
②CACHE
# 这一句指明要缓存的内容
③NETWORK
# 声明用于指定无需缓存的文件
④FALLBACK
#这个声明允 许你在资源不可用的情况下，将用户重定
向到特定文件

3.客户端文件配置

<html manifest="xxx.manifest">

将文件关联到html文件中。这样当第一次访问的时候，就会在缓存到本地。即使在断网的情况下，也能访问到缓存清单中要缓存的内容

4.更新缓存

浏览器发现缓存清单文件没有更改 则不会重新缓存。需要更改缓存文件 得以生效，获得通过javascript修改

5.在线状态监测

HTML5 提供了两种检测是否在线的方式：navigator.onLine 和 online/offline 事件。
1.navigator.onLine 属性表示当前是否在线。如果为 true, 表示在线；如果为 false, 表示离线
2.开发者还需要在网络状态发生变化时立刻得到通知，因此 HTML5 还提供了 online/offline 事件

【html5】html5离线存储的更多相关文章

  1. HTML5：离线存储

    最近由于找工作一直没时间也没有精力更新博客,找工作真是一件苦逼的事情啊...不抱怨了,我们来看看HTML5的新特性---离线存储吧. 随着Web App的发展,越来越多的移动端App使用HTML5的方 ...

  2. html5的离线存储问题集合

    HTML5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如 来引入一个manifest文件,这个文件的路径可以是相对的,也可以是绝对的,如果你的web应用很多,而且希望能集中 ...

  3. HTML5的离线存储有几种方式？

    localStorage长期存储数据,浏览器关闭后数据不丢失: sessionStorage数据在浏览器关闭后自动删除.

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

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

  5. HTML5离线存储原理

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

  6. 神奇的HTML5离线存储（应用程序缓存）

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

  7. HTML5离线存储的工作原理和使用

    在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件. 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个 ...

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

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

  9. HTML5的离线储存

    在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件.        原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技 ...

  10. HTML5的离线应用

    参考:有趣的HTML5:离线存储——segmentfault HTML5的离线存储 简介 HTML5提供了很多新的功能以及相应的接口,离线存储就是其中的一个.通过浏览器访问Web App需要联网发送请 ...

随机推荐

  1. DBCP和C3P0使用--未完善

    一.前言: DBCP和C3PO都可以作为数据连接池, 二. 导入jar包: 三.配置applicationContext.xml文件 配置dbcp <!-- 创建数据源 --> <b ...

  2. 18_Python列表常用方法总结

    ''' 1.列表切片索引\截取 2.列表的增删改查 3.列表最大值\列表最小值\排序 4.列表的遍历 5.列表的嵌套 6.列表和字符串的互转 7.判断元素是否在列表中 ''' #列表使用中括号表示 元 ...

  3. 洛谷 [P1963] [NOI2009] 变换序列

    这是一道二分图匹配的题 先%dalao博客 建图并没有什么难的,但是关键在于如何使字典序最小. 一个很显然的想法是先求出一个完美匹配,然后从x集合的第一个元素开始,如果该元素匹配的较小的一个,那么继续 ...

  4. bzoj 3597: [Scoi2014]方伯伯运椰子 [01分数规划 消圈定理 spfa负环]

    3597: [Scoi2014]方伯伯运椰子 题意: from mhy12345 给你一个满流网络,对于每一条边,压缩容量1 需要费用ai,扩展容量1 需要bi, 当前容量上限ci,每单位通过该边花费 ...

  5. BZOJ 1355: [Baltic2009]Radio Transmission [KMP 循环节]

    1355: [Baltic2009]Radio Transmission Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 792  Solved: 535 ...

  6. B 洛谷 P3604 美好的每一天 [莫队算法]

    题目背景 时间限制3s,空间限制162MB 素晴らしき日々 我们的情人,不过是随便借个名字,用幻想吹出来的肥皂泡,把信拿去吧,你可以使假戏成真.我本来是无病呻吟,漫无目的的吐露爱情---现在这些漂泊不 ...

  7. Windows Server 2016-Powershell迁移FSMO角色

    上一章节我们讲到了通过Ntdsutil命令行进行FSMO角色迁移,本章开始之前我们先讨论一下有关FSMO角色放置建议: 建议将架构主机角色(Schema Master)和域命名主机角色(Domain ...

  8. js中判断数组中是否含有某个字符串方法

    1．两个数组间互相校验 Var  inArray = function(arr, item) { for(var i = 0; i < arr.length; i++) { if(arr[i] ...

  9. the c programing language 学习过程6

    payroll工资名单 hierarchy分层层次 vexing 使人烦恼的 alignment结盟 semantics 语义 aethetic审美 parameterize 参数化 1结构标记 成员 ...

  10. 转载微信公众号 测试那点事：Jmeter乱码解决

    原文地址: http://mp.weixin.qq.com/s/4Li5z_-rT0HPPQx9Iyi5UQ  中文乱码一直都是比较让人棘手的问题,我们在使用Jmeter的过程中,也会遇到中文乱码问题 ...