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. 《.NET 设计规范》第 5 章：成员设计

    <.NET 设计规范>第 5 章:成员设计 5.1 成员设计的通用规范 要尽量用描述性的参数名来说明在较短的重载中使用的默认值. 避免在重载中随意地改变参数的名字.如果两个重载中的某个参数 ...

  2. C++复制、压缩文件夹

    之前写过一篇用zlib库来压缩的,但zlib只能压缩文件,我需要压缩文件夹,要想压缩文件夹还得利用zlib库自己写代码,我是真的服了,一个开源库这么不好用. C++复制文件夹也是麻烦事,网上这篇文章: ...

  3. 前端自动化测试神器-Katalon进阶用法

    前言 上一篇介绍了Katalon的基础用法,本篇继续介绍一些进阶的用法. Keyword 和 Method Call Statement Keyword Keyword就是自定义方法,该方法在当前项目 ...

  4. JavaScript 数值Number类型详解

    Number 问题 如果下面的问题你都能回答对了吗? 0.1 + 0.2 == 0.3 成立吗? .e-5 表示多少? 怎么表示8进制? 怎么转换进制? 如何将字符串转换成数值或整数?反过来呢?十六进 ...

  5. Tensorflow滑动平均模型tf.train.ExponentialMovingAverage解析

    觉得有用的话,欢迎一起讨论相互学习~Follow Me 移动平均法相关知识 移动平均法又称滑动平均法.滑动平均模型法(Moving average,MA) 什么是移动平均法 移动平均法是用一组最近的实 ...

  6. MonogoDB 查询小结

    MonogoDB是一种NoSQL数据库 优点: 1.数据的存储以json的文档进行存储(面向文档存储) 2.聚合框架查询速度快 3.高效存储二进制大对象 缺点: 1.不支持事务 2.文件存储空间占用过 ...

  7. BZOJ 3998: [TJOI2015]弦论 [后缀自动机 DP]

    3998: [TJOI2015]弦论 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 2152  Solved: 716[Submit][Status] ...

  8. webstorm你不知道的秘密

    相信你们用webstorm肯定都会用上下面介绍的Emmet插件这个可以自带的哦 Emmet语法 子代:> 兄弟:+ 父代:^ 重复:* 成组:() ID:# class:. 属性:[] 编号:$ ...

  9. Android 进程间通信

    什么鬼!单例居然失效了,一个地方设置值,另个地方居然取不到,这怎么可能?没道理啊!排查半天,发现这两就不在一个进程里,才恍然大悟-- 什么是进程 按照操作系统中的描述:进程一般指一个执行单元,在 PC ...

  10. CentOS安装JDK 8

    准备工作 首先,更新包: yum update 检查服务器上是否已安装旧版本的Java: java -version 如果有旧版本的Java则移除: yum remove java-1.6.0-ope ...