manifest方法引入appcache文件，缓存页面，是html5的新特性，通过加载一次，下次自动读取缓存，加载速度快，离线也能加载。缺点就是，被加载的页面会被强制缓存所有的内容。 为了解决不加载所有内容这个问题，经过我反复研究，终于找到了两个解决方案，不多说，看代码。

引入html5离线存储，需要在页面头文件引入.appcache文件，如下：

<html lang="zh-CN" manifest="${ctx }/plugins/mobileweb/web/views/hbcf_index.appcache">

.appcache的写法网上一搜一堆一堆的，我写的如下：

CACHE MANIFEST   //
# 2015-04-24 v1.0.4
../resources/css/bootstrap.min.css
../resources/css/oaCss.css
../resources/css/styles.css
../resources/imgs/oa.png
../resources/imgs/dashboard.png
../resources/imgs/resources.png
../resources/imgs/edit.png
../resources/imgs/leaner.png
../../../../resources/jquery/jquery-1.8.1.min.js

NETWORK:
http://localhost:8080/xy/mobileweb/index-controller
*

FALLBACK:
/html5/ /404.html    //如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件：第一个 URI 是资源，第二个是替补。

manifest 告知浏览器被缓存的内容（以及不缓存的内容），manifest 文件可分为三个部分：

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 PNG 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

一旦应用被缓存，它就会保持缓存直到发生下列情况：

  • 用户清空浏览器缓存
  • manifest 文件被修改（参阅下面的提示）
  • 由程序来更新应用缓存

重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。apache文件最大5M。

为了解决离线应用缓存局部刷新问题，我找到了两种方法，如下：

1、ajax请求可以不刷新页面。

ajax的请求路径写在.apache文件的network下面，通过ajax获取的值在页面是可以不缓存的。

我写的代码如下：

<script type="text/javascript">
$(function(){
    //因为要从缓存应用程序中，吧ajax返回的值设置成全局变量，所以，用到了回调函数，而且为了保证是全局变量，吧ajax请求变成了同步请求，经过反复验证。
    $.ajaxSetup({async : false});
    $.post("${ctx}/mobileweb/currentUser",function(user,status){
        $("#user-realName").html(user.realName);
        $("#welcome").html('<i class="glyphicon glyphicon-user oa_dropMenu_welcomeUser"></i>'+user.realName+',欢迎您！');
        if (status == "success") { account=user.account;  }
        callback(user);
    });
});
function callback(obj){
    account = obj.account;
}
</script>
 <script type="text/javascript" src="${ctx}/plugins/mobileweb/web/resources/js/oa.js"></script>  //由于有加载先后顺序问题，所以把oa.js放在了js最后。oa.js里的account也是ajax返回的值

2、网上流传使用iframe可以获得自己想要缓存的东西，我也尝试了一把，代码如下：

index2.jsp文件代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN" manifest="${ctx }/plugins/mobileweb/web/views/hbcf_index.appcache">
<head>
  <title>缓存页面</title>
</head>
<body>
</body>
</html>

index.jsp文件代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<!DOCTYPE html>

<body>

<div style="visibility: hidden;width: 0px;height: 0px;">
    <iframe  width=0 height=0 frameborder=0 src="index2.jsp" ></iframe>
</div>

....                                        //自己想要加载的东西，不会被缓存下来。

<body>

方法二的缺点就是：确实有缓存下来，确实加载缓存了，但确实也重新加载了。

参考html5API：//http://www.w3school.com.cn/html5/html_5_app_cache.asp

处理html5离线应用程序存储的一些问题。的更多相关文章

  1. HTML5离线缓存（Application Cache）

    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...

  2. HTML5 离线缓存管理库

    一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...

  3. HTML5离线Web应用实战：五步创建成功

    [IT168 技术]HTML5近十年来发展得如火如荼,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化.HTML功能越来越丰富,支持图片上传拖拽.支持localstorage. ...

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

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

  5. html5 离线存储

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

  6. HTML5离线缓存问题

    HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...

  7. Manifesto – HTML5 离线应用程序缓存校验工具

    Manifesto 是一个 HTML5 离线应用程序缓存校验工具,提供了快速校验 HTML5 manifest 文件有效性的方法.离线应用程序缓存在使用中最困难的部分之一就是无法正常工作的时候没有明显 ...

  8. HTML5离线存储原理

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

  9. html5 离线存储 worker

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

随机推荐

  1. Sublime text 快捷键总结

    下述快捷键都是我写C++代码时发现的,是否适用其他格式(扩展名)的文件尚为未知. Basic Editing Ctrl + A 全选 Ctrl + S 保存 Ctrl + C 复制 Ctrl + V ...

  2. sql注入实例分析

    什么是SQL注入攻击?引用百度百科的解释: sql注入_百度百科: 所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.具 ...

  3. leach协议matlab仿真代码

    http://www.ilovematlab.cn/thread-177006-1-1.html LEACH協議clear;%清除內存變量 xm=100;%x軸範圍ym=100;%y軸範圍 sink. ...

  4. html input file标签的上传文件 注意点

    文件上传框  代码格式:<input type=“file” name=“...” size=“15” input enctype="multipart/form-data“ maxl ...

  5. Why The Golden Age Of Machine Learning is Just Beginning

    Why The Golden Age Of Machine Learning is Just Beginning Even though the buzz around neural networks ...

  6. VS2010+OpenCV2.4.6永久性配置方法

    1. 配置OpenCV环境变量 计算机->(右键)属性,出现如图1所示界面 单击“高级系统设置”,选中高级(标签)出现如图2所示界面 单击右下方的“环境变量”,弹出如图3所示界面,注意这里最好用 ...

  7. varnish4.0简介

    Varnish 4.0 简介 Varnish 是一款开源的HTTP加速器和反向代理服务器,它的主要特点有: (1)是基于内存缓存,重启后数据将消失.(2)利用虚拟内存方式,io性能好.(3)支持设置0 ...

  8. zabbix 分布式监控（proxy）源码安装

    安装分布式监控(代理节点) 1.下载软件zabbix-3.2.1.tar.gz 1.1 解压 wget http://nchc.dl.sourceforge.net/project/zabbix/ZA ...

  9. 基于无锁的C#并发队列实现（转载）

    最近开始学习无锁编程,和传统的基于Lock的算法相比,无锁编程具有其独特的优点,Angel Lucifer的关于无锁编程一文对此有详细的描述. 无锁编程的目标是在不使用Lock的前提下保证并发过程中共 ...

  10. ASP.NET MVC4中使用Ninject

    1.NuGet获取Ninject.dll 选中项目右键: .NET技术交流群 199281001 .欢迎加入. 2.全局注册  Global.asax.cs //注册Ninject依赖注入全局解析器 ...