前端html部分

//canvas.html

<!DOCTYPE html>

<html manifest="/test.appcache">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>浏览器离线存储</title>

</head>

<body>

    <div >

        <img src="/photos/touxiang.jpg" />

        <img id='hgk' src="/photos/canvas.png" />

    </div>

 </body>

</html>

配置文件

CACHE MANIFEST

#v1.0.5

#需要缓存的文件

CACHE:

/photos/canvas.png

#不需要缓存的文件

NETWORK:

*

#无法访问页面

FALLBACK:

404.html

服务器端node.js

app.js

var express = require('express');

var app = express();

var path = require('path');

var join = path.join;

var ejs = require('ejs')    //ejs模板

var fs = require("fs");     //fs模块

var bodyParser = require('body-parser');    //解析post请求模块

var favicon = require('serve-favicon');

var events = require("events");

var emitter = new events.EventEmitter()

app.set('views', __dirname+'/views');

app.disable('view cache'); //解除视图缓存

app.engine('.html', ejs.__express);

app.set('view engine', 'html')

app.use(express.static(path.join(__dirname,'public'))); //设置静态文件夹

app.use(bodyParser.urlencoded({ extended: false }));

app.use(favicon(__dirname + '/favicon.ico'));

app.use(function(req,res,next){

    if(req.url=='/test.appcache'){

        res.setHeader('content-type','text/cache-manifest');

    };

    next();

})

app.get('/canvas',function(req,res){

    res.sendFile( __dirname + "/views/" + "canvas.html" );

})

app.listen(8081,function(){

    console.log('success connect')

})

第一次加载页面时候（需联网）

第二次加载页面的时候（离线加载）


我们设置离线缓存的图片在无网络情况下能够正常从缓存中访问。
离线缓存中的坑：
清单文件经过修改。请注意：更新清单中列出的某个文件并不意味着浏览器会重新缓存该资源。清单文件本身必须进行更改。
1.查看缓存状态

var appCache = window.applicationCache;

switch (appCache.status) {

  case appCache.UNCACHED: // UNCACHED == 0

    return 'UNCACHED';

    break;

  case appCache.IDLE: // IDLE == 1

    return 'IDLE';

    break;

  case appCache.CHECKING: // CHECKING == 2

    return 'CHECKING';

    break;

  case appCache.DOWNLOADING: // DOWNLOADING == 3

    return 'DOWNLOADING';

    break;

  case appCache.UPDATEREADY:  // UPDATEREADY == 4

    return 'UPDATEREADY';

    break;

  case appCache.OBSOLETE: // OBSOLETE == 5

    return 'OBSOLETE';

    break;

  default:

    return 'UKNOWN CACHE STATUS';

    break;

};

2.更新浏览器缓存

var appCache = window.applicationCache;

appCache.update(); // Attempt to update the user's cache.

...

if (appCache.status == window.applicationCache.UPDATEREADY) {

  appCache.swapCache();  // The fetch was successful, swap in the new cache.

}

请注意：以这种方式使用 update() 和 swapCache() 不会向用户提供更新的资源。此流程只是让浏览器检查是否有新的清单、下载指定的更新内容以及重新填充应用缓存。因此，还需要对网页进行两次重新加载才能向用户提供新的内容，其中第一次是获得新的应用缓存，第二次是刷新网页内容。
好消息是，您可以避免重新加载两次的麻烦。要使用户更新到最新版网站，可设置监听器，以监听网页加载时的 updateready 事件：

//Check if a new cache is available on page load.

window.addEventListener('load', function(e) {

  window.applicationCache.addEventListener('updateready', function(e) {

    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {

      // Browser downloaded a new app cache.

      // Swap it in and reload the page to get the new hotness.

      window.applicationCache.swapCache();

      if (confirm('A new version of this site is available. Load it?')) {

        window.location.reload();

      }

    } else {

      // Manifest didn't changed. Nothing new to server.

    }

  }, false);

}, false);

由于离线缓存会默认缓存html页面，所以对于动态html输出的页面例如(php,jsp)等来说使用离线缓存会出现很多问题， 根据Application Cache的加载机制，如果仅仅修改资源文件的内容（没有修改资源文件的路径或名称），浏览器将直接从本地离线缓存中获取资源文件。所以在每次修改资源文件的同时，需要修改manifest文件，以触发资源文件的重新加载和缓存。这其中，最有效的方式是修改manifest文件内部的版本注释（所以说那句注释相当重要） 如果资源没有被缓存，在而没有设置NETWORK的情况下，将会无法加载（浏览器不会去网络上进行加载），所以需要使用通配符来表明除了CACHE中确定的资源以外，其他资源都需要去网络上加载。

参考文章
http://blog.csdn.net/fwwdn/ar...
离线缓存坑：http://www.th7.cn/web/html-cs...

HTML5离线存储整理的更多相关文章

  1. 吓哭原生App的HTML5离线存储技术，却出乎意料的容易！【低调转载】

    吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥 ...

  2. html5 离线存储

    在html页面中引入manifest文件 <html manifest="sample.appcache"> 在服务器添加mime-type text/cache-ma ...

  3. HTML5离线存储原理

    找到一篇介绍离线缓存的,感觉比之前看到的解释的更透彻,新的知识点记录如下: 大家都知道Web App是通过浏览器来访问的,所以离线状态下是无法使用app的.其中web app中的一些资源并不经常改变, ...

  4. html5 离线存储 worker

    html5 离线存储 <!DOCTYPE html> <html manifest="cache.manifest"> <!--manifest存储- ...

  5. 神奇的HTML5离线存储（应用程序缓存）

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接前端小尚,谢谢! 前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入 ...

  6. 【html5】html5离线存储

    html5本地存储之离线存储 1.为什么使用离线存储 ①最新的主流的浏览器中都已添加了对HTML5的offline storage功能的支持,HTML5离线存储功能非常强大, 它的作用是:在用户没有与 ...

  7. 利用Node实现HTML5离线存储

    前言 支持离线Web应用开发是HTML5的一个重点.离线Web应用就是在设备不能上网的时候仍然可以运行的应用.开发离线Web应用需要几个步骤,其中一个就是离线下必须能访问一定的资源(图像 JS css ...

  8. html5离线存储

    为了提升Web应用的用户体验,我们在做网站或者webapp的时候,经常需要保存一些内容到本地.例如,用户登录token,或者一些不经常变动的数据. 随着HTML5的到来,出现了诸如AppCache.l ...

  9. HTML5离线存储的工作原理和使用

    在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件. 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个 ...

随机推荐

  1. vue项目npm run dev报错events.js:160 throw er; // Unhandled 'error' event listen EADDRINUSE :::8002

    出错情况,如下图: 报错原因: listen EADDRINUSE :::8002 意思是当前8002端口被占用 解决办法: 一:简单粗暴:关掉可能影响的相关程序,重新执行启动. 二: 1.Win+R ...

  2. Tableau学习Step4一数据解释、异常值监测、参数使用、分析结果如何对外发布

    Tableau学习Step4一数据解释.异常值监测.参数使用.分析结果如何对外发布 本文首发于博客冰山一树Sankey,去博客浏览效果更好. 一. 前言 本教程通过一个案例从浅到深来学习Tableau ...

  3. 同步a表的数据到 b表

    //同步a表的数据到 b表UPDATE a t1 JOIN b t2 ON t1.finance_id = t2.idSET t1.a_id = t2.a_id,t1.b_name = t2.b_na ...

  4. tensorflow源码解析之framework-node

    目录 什么是node node_def 关系图 涉及的文件 迭代记录 1. 什么是node TF中的计算图由节点组成,每个节点包含了一个操作,表示这个节点的作用,比如,如果一个节点的作用是做矩阵乘法, ...

  5. ASP.NET Core 6框架揭秘实例演示[25]：配置与承载环境的应用

    与服务注册一样,针对配置的设置同样可以采用三种不同的编程模式.第一种是利用WebApplicationBuilder的Host属性返回的IHostBuilder对象,它可以帮助我们设置面向宿主和应用的 ...

  6. JDBC快速入门(附Java通过jar包连接MySQL数据库)

    •通过jar包连接mysql数据库 •下载jar包 Java 连接 MySQL 需要驱动包,官网下载地址为MySQL驱动包官网下载,选择适合的jar包版本进行安装 (记得安装的地址,下面导入包时会用到 ...

  7. Java案例——字符串中的数据排序

    需求:有一个字符串"9 1 2 7 4 6 3 8 5 0",请编写程序实现从小到大数据排序 分析:最重要的部分是如何将字符串中的数据取出来 1.定义一个字符串为"9 1 ...

  8. 6月19日 python学习总结 Django之路由系统

    Django之路由系统   Django的路由系统 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调 ...

  9. Joplin开源笔记软件使用入门

    Joplin是一款开源免费的笔记软件,可以记录笔记.待办清单,支持Markdown,可导出Markdown格式.HTML格式.PDF格式的文档,具备自动同步功能,可定时自动备份到文件系统或网盘. Jo ...

  10. CF1553X Harbour.Space Scholarship Contest 2021-2022 (Div. 1 + Div. 2)

    掉大分 E 对于一个序列,把它排回去的最小次数是 $\sum置换环大小-1=错位个数-置换环个数$ 注意到m小于等于n/3.那么最多修正2m个错位.正确位置的个数必须大于等于n/3才可能在m次内修正. ...