离线存储技术

HTML5提出了两大离线存储技术：localstorage与Application Cache，两者各有应用场景；传统还有离线存储技术为Cookie。

经过实践我们认为localstorage应该存储一些非关键性ajax数据，做锦上添花的事情；

Application Cache用于存储静态资源，仍然是干锦上添花的事情；

而cookie只能保存一小段文本（4096字节）；所以不能存储大数据，这是cookie与上述缓存技术的差异之一，而因为HTTP是无状态的，服务器为了区分请求是否来源于同一个服务器，需要一个标识字符串，而这个任务就是cookie完成的，这一段文本每次都会在服务器与浏览器之间传递，以验证用户的权限。

所以Application Cache的应用场景不一样，所以使用也不一致。

什么是Application Cache

HTML5引入了应用程序缓存技术，意味着web应用可进行缓存，并在没有网络的情况下使用，通过创建cache manifest文件，可以轻松的创建离线应用。

Application Cache带来的三个优势是：

① 离线浏览

② 提升页面载入速度

③ 降低服务器压力

而且主要浏览器皆以支持Application Cache，就算不支持也不会对程序造成什么影响

Application Cache离线存储的应用是什么

乘坐飞机、手机信号弱、去演讲的时候可能没有网络，这个时候可以使用离线存储

检测网络是否在线

既然我们知道Application Cache是用于当网络离线的时候读取缓存在客户端的文件的，那怎么检测网络是否在线呢？

检测网络OnLine属性如下：

if (navigator.onLine == true){

  　　alert("正常上网")
}
else{
　　  alert("无法连接网络") 
}

离线存储使用方法

浏览器端

1.浏览器上只需要一个简单的设置即可，在文档的 <html> 标签中包含 manifest 属性

<html manifest="demo.appcache">

文件扩展名建议为：.appcache。首次访问网页缓存在本地的文件，如果下一次如果没有网，就不走服务器了，就取这个文件清单了

服务器端

1.在服务器添加配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

现在应用的还不是特别的广泛，因为大部分网站都有交互的功能，一但没有交互功能，网站就成了纯展示，意义就不大了。

浏览器端.appcache文件清单使用详解

CACHE MANIFEST

CACHE:

# 需要缓存的文件列表

style1.css

1.jpg

01.js

http://localhost/applicationcache/02.js

http://localhost/applicationcache/zepto.js

NETWORK:

# 不需要缓存的

4.jpg

FALLBACK:

# 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html

2.jpg/3.jpg

无网络后演示图：

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文件的缓存机制(不是存储技 ...

随机推荐

  1. Git暂存本地代码，强制获取远程最新代码

    一:git stash  // 把本地修改的代码压到git栈中去 二:git pull  // 本地代码压栈之后,pull远程代码会完全覆盖本地代码 三:git stash list  // 可以查看 ...

  2. [DP]最长递增子序列

    #include <iostream> #include <limits.h> #include <vector> #include <algorithm&g ...

  3. 卸载VMware

    最近使用ubuntu的时候操作不当直接卡死了,然后强制关闭VMware软件,之后再打开时出现本文中的 “Vmware启动ubuntu 出现错误 ”这个情况,具体请看链接:https://www.cnb ...

  4. Spring Cloud(一)：服务注册与发现

    Spring Cloud是什么 Spring Cloud是一系列框架的有序集合.它利用Spring Boot的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心.消息总线.负载均 ...

  5. PythonI/O进阶学习笔记_4.自定义序列类(序列基类继承关系/可切片对象/推导式)

    前言: 本文代码基于python3 Content: 1.python中的序列类分类 2. python序列中abc基类继承关系 3. 由list的extend等方法来看序列类的一些特定方法 4. l ...

  6. Spring Boot（一）：快速开始

    Spring Boot(一):快速开始 本系列文章旨在使用最小依赖.最简单配置,帮助初学者快速掌握Spring Boot各组件使用,达到快速入门的目的.全部文章所使用示例代码均同步Github仓库和G ...

  7. cssrelative

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. OpenGl读取导入3D模型并且添加鼠标移动旋转显示

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11543828.html 最近实习要用到opengl库就是跟opencv 有点像的那个,然后下了 ...

  9. Java之BigDecimal详解

    一.BigDecimal概述 ​ Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算.双精度浮点型变量double可以处理16位有效数,但在实 ...

  10. SWPU CTF题解

    本博客为西南石油大学(南充校区)CTF团队赛的题解 所有题目网址:http://47.106.87.69:9000/game 今天我是流泪狗狗头 解压后发现压缩包中是一个带有密码的图片,winhex分 ...