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. windows的MySQL安装

    Window环境下: 1.下载MySQL MySQL社区版:https://dev.mysql.com/downloads/mysql/ MySQL商业版:https://www.mysql.com/ ...

  2. CSS选择器的组合选择器之后代选择器和子元素选择器

    实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  3. System.nanoTime

    System.currentTimeMillis()返回的毫秒,这个毫秒其实就是自1970年1月1日0时起的毫秒数. System.nanoTime()返回的是纳秒,nanoTime而返回的可能是任意 ...

  4. bzoj 1598: [Usaco2008 Mar]牛跑步 [k短路 A*] [学习笔记]

    1598: [Usaco2008 Mar]牛跑步 题意:k短路 ~~貌似A*的题目除了x数码就是k短路~~ \[ f(x) = g(x) + h(x) \] \(g(x)\)为到达当前状态实际代价,\ ...

  5. bzoj 4826: [Hnoi2017]影魔 [主席树 单调栈]

    4826: [Hnoi2017]影魔 题意:一个排列,点对\((i,j)\),\(p=max(i+1,j-1)\),若\(p<a_i,a_j\)贡献p1,若\(p\)在\(a_1,a_2\)之间 ...

  6. BZOJ 2809: [Apio2012]dispatching [主席树 DFS序]

    传送门 题意:查询树上根节点值*子树中权值和$\le m$的最大数量 最大值是多少 求$DFS$序,然后变成区间中和$\le m$最多有几个元素,建主席树,然后权值线段树上二分就行了 $WA$:又把边 ...

  7. C# 使用 Lotus notes 公共邮箱发送邮件

    公司的邮件系统用的是反人类的 Lotus notes, 你敢信? 最近要实现一个功能,邮件提醒功能,就是通过自动发送提醒邮件 前前后后这个问题搞了2天,由于公司的诸多条件限制,无法直接调用到公司发送邮 ...

  8. Visual Studio 2017 for Mac 快捷键

    格式化代码:  ^I 转到定义:⌘D 注释/反注释: ⌘/ 生成:⌘B 重新生成:^⌘B 调试运行:⌘↩ 不调试运行:⌥⌘↩ 添加/删除断点:⌘\ 查看所有断点:⌥⌘↩ 放大:⌘+ 缩小:⌘- 正常大 ...

  9. 【深度学习】L1正则化和L2正则化

    在机器学习中,我们非常关心模型的预测能力,即模型在新数据上的表现,而不希望过拟合现象的的发生,我们通常使用正则化(regularization)技术来防止过拟合情况.正则化是机器学习中通过显式的控制模 ...

  10. 基于Spring Boot，使用JPA动态调用Sql查询数据

    在<基于Spring Boot,使用JPA操作Sql Server数据库完成CRUD>,<基于Spring Boot,使用JPA调用Sql Server数据库的存储过程并返回记录集合 ...