离线存储技术

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. 使用Elastic APM监控你的.NET Core应用

    作者:Jax 前言 在应用实际的运维过程中,我们需要更多的日志和监控来让我们对自己的应用程序的运行状况有一个全方位的了解.然而对于大部分开发者而言,平时大家所关注的更多的是如何更优雅的实现业务,或者是 ...

  2. css 元素实际宽高

    首先定义一个div. 然后稍微装修一下 下面开始区分 一.clientWidth和clientHeigh . clientTop和clientLeft 1,clientWidth的实际宽度 clien ...

  3. 聚焦Python分布式爬虫必学框架Scrapy 打造搜索引擎视频教程

    下载链接:https://www.yinxiangit.com/595.html 目录: 第1章 课程介绍介绍课程目标.通过课程能学习到的内容.和系统开发前需要具备的知识 第2章 windows下搭建 ...

  4. .NET框架之“小马过河”

    .NET框架之"小马过河" 有许多流行的.NET框架,大家都觉得挺"重",认为很麻烦,重量级,不如其它"轻量级"框架,从而不愿意使用.面对形 ...

  5. python根据搜索词下载百度图片

    # coding=utf-8 """根据搜索词下载百度图片""" import re import urllib import os def ...

  6. pycharm中报ImportError: libcublas.so.9.0错误的解决方法。

    前些天不知为啥cuda不能用了,nvidia-smi也没反应.然后我就重新装了一下cuda.后来使用pycharm远程连接时,居然报错了. ImportError: libcublas.so.9.0: ...

  7. Java之BigDecimal详解

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

  8. 【面试】足够“忽悠”面试官的『Spring事务管理器』源码阅读梳理（建议珍藏）

    PS:文章内容涉及源码,请耐心阅读. 理论实践,相辅相成 伟大领袖毛主席告诉我们实践出真知.这是无比正确的.但是也会很辛苦. 就像淘金一样,从大量沙子中淘出金子一定是一个无比艰辛的过程.但如果真能淘出 ...

  9. JavaScript阻止冒泡事件

    事件兼容 event = event ? event : window.event; js停止冒泡· window.event? window.event.cancelBubble = true : ...

  10. 给idea设置默认使用的JDK

    一,前言 在文章给idea设置默认使用的maven配置中我给我的idea设置了默认使用的maven,并且在setting.xml文件中,设置了本地的maven仓库,这样就不会使用maven默认在C盘的 ...