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. 11_Python文件操作

    一.文件操作的基本流程 计算机系统分为:计算机硬件,操作系统,应用程序三部分. 我们用python或其他语言编写的应用程序若想要把数据永久保存下来,必须要保存于硬盘中,这就涉及到应用程序要操作硬件,众 ...

  2. 细说Django的admin

    在admin.py中只需要将地Model中某个类注册,即可在Admin中进行增删查改的功能,例如: admin.site.register(models.UserInfo) 这种方式比较简单,如果想要 ...

  3. Yii 2.0.3 Advanced版控制器不能包含大写字母的Bug

    Yii 2.0.3 Advanced版控制器不能包含大写字母的Bug,我是直接下载Archive文件安装的,非Composer方式安装 Yii 框架之前是支持在Url中包含大写字母的 最新的Yii 2 ...

  4. ConcurrentHashMap、CopyOnWriteArrayList、LinkedHashMap

    HashMap中未进行同步考虑,而Hashtable在每个方法上加上了synchronized,锁住了整个Hash表,一个时刻只能有一个线程操作,其他的线程则只能等待,在并发的环境下,这样的操作导致H ...

  5. C语言深度剖析-笔记

    关键字: C语言关键字32个: 关键字                                         意 义 auto                           声明自动变 ...

  6. 洛谷 [P1280] 尼克的任务

    DP 题目问的是最大空暇时间,那么就定义dp[i]为第i分钟的最大空暇时间,显然满足最优子结构,我们发现dp[i]仅与其后的值有关,那么从后往前推,如果第i分钟没有任务,dp[i]=dp[i+1],如 ...

  7. BZOJ 1426: 收集邮票 [DP 期望 平方]

    传送门 题意: 有n种不同的邮票,皮皮想收集所有种类的邮票.唯一的收集方法是到同学凡凡那里购买,每次只能买一张,并且买到的邮票究竟是n种邮票中的哪一种是等概率的,概率均为1/n.但是由于凡凡也很喜欢邮 ...

  8. [LeetCode] 679. 24 Game（回溯法）

    传送门 Description You have 4 cards each containing a number from 1 to 9. You need to judge whether the ...

  9. 二、urllib进阶

    Handler处理器 和 自定义Opener opener是 urllib.request.OpenerDirector 的实例,我们之前一直都在使用的urlopen,它是一个特殊的opener(也就 ...

  10. 记录：mac的浏览器访问任何域名、网址都跳转到本地127.0.0.1或固定网址

    新年上班第一天,刚开机就遇到了个小坑,问题是这样,打开浏览器,输入任何网址都跳转到本地的一个项目,该项目在本地Apache配置下,监听的端口是8888,本机访问的形式是127.0.0.1:8888. ...