离线存储技术

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. Spring Cloud Alibaba | 微服务分布式事务之Seata

    Spring Cloud Alibaba | 微服务分布式事务之Seata 本篇实战所使用Spring有关版本: SpringBoot:2.1.7.RELEASE Spring Cloud:Green ...

  2. explain的关键字段的意义

    mysql提供的explain工具可以输出一些有用的信息. 一下是相关的部分返回值的意义. select_type 表示SELECT的类型,常见的取值有: SIMPLE:简单表,不使用表连接或子查询 ...

  3. JSP学习笔记（6）—— 自定义MVC框架

    仿照SpringMVC,实现一个轻量级MVC框架,知识涉及到了反射机制.注解的使用和一些第三方工具包的使用 思路 主要的总体流程如下图所示 和之前一样,我们定义了一个DispatchServlet,用 ...

  4. 实验吧CTF练习题---web---登录一下好吗解析

    实验吧web之登陆一下好么   地址:http://www.shiyanbar.com/ctf/1942 flag值:ctf{51d1bf8fb65a8c2406513ee8f52283e7}   解 ...

  5. Net基础篇_学习笔记_第十二天_面向对象继承(命名空间 、值类型和引用类型）

    命名空间可以认为类是属于命名空间的. 解决类的重名问题,可以看做类的“文件夹”如果在当前项目中没有这个类的命名空间,需要我们手动的导入这个类所在的命名空间.1).用鼠标去点2).alt+shift+F ...

  6. 【新】mybatis中大于等于小于等于的两种常用写法

    mybatis中大于等于小于等于的写法 原符号 < <= > >= & ' " 替换符号 < <= > >= & &a ...

  7. DevExpress的PdfViewer添加工具栏实现PDF打开、预览、保存、打印

    场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...

  8. CentOS7 使用tree命令不显示中文

    1.你如果使用tree命令看见的情况是这样 [lk@localhost ~]$ tree . ├── perl5 ├── Python-.tgz ├── \\\\\\ ├── \\\\\\ ├── \ ...

  9. JSP获取网络IP地址

    import javax.servlet.http.HttpServletRequest; public class RemoteAddress { public static String getR ...

  10. Delphi - 调用外部程序并阻塞到外部程序中

    Delphi 调用外部程序并阻塞到外部程序中 背景说明: 前段时间开发一个数据转换的系统,业务逻辑中说明数据需要压缩成.tar.gz格式. 我在Windows系统下采用,先生成批处理文件,然后调用Wi ...