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. 模拟Modbus协议问题

    问题: 在嵌入式系统开发中,Modbus协议是工业控制系统中广泛应用的一种协议.本题用来简单模拟Modbus协议,只需根据条件生成符合该协议的数据帧,并解析所获取的数据.假设设备使用的协议发送数据格式 ...

  2. Springside学习

    http://blog.chinaunix.net/uid-122937-id-3935052.html [一]Maven + Eclipse + springside4安装与配置 Maven安装与配 ...

  3. 【poj2342】 Anniversary party

    http://poj.org/problem?id=2342 (题目链接) 题意 没有上司的舞会... Solution 树形dp入门题. dp[i][1]表示第i个节点的子树当节点i去时的最大值,d ...

  4. 记录一次MVC 3.0错误 HTTP 404您正在查找的资源(或者它的一个依赖项)可能已被移除，或其名称已更改，或暂时不可用。请检查以下 URL 并确保其拼写正确。

    在部署到IIS7时,MVC3报了一个找不到资源的错误,文件肯定是有的,而且页面是肯定报错的,也就说内部运行错误了,而MVC把错误没有抛出来而已: 所以对症下药,发觉我的项目里面用了rexs进行多语言, ...

  5. POJ2492 A Bug's Life

    Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 33833   Accepted: 11078 Description Ba ...

  6. PHP邮件注入攻击技术

    1. 简介 如 今,互联网的使用急剧上升,但绝大多数互联网用户没有安全知识背景.大多数的人都会使用互联网通过邮件Email的方式和他人进行通信.出于这个原因,大 多数网站允许他们的用户联系他们,向网站 ...

  7. 使用U盘安装mint

    系统坏了,重新装的时候,硬盘甚至都没法格式化...所以,狠狠心买了块固态硬盘,123G,威刚. 想自己装Linux系统,这样用起来更方便一点,不用装虚拟机,然后再跑linux什么的.最后选了mint. ...

  8. Android消息通知（notification）和PendingIntent传值

    通知栏的自定义布局:转:http://blog.csdn.net/vipzjyno1/article/details/25248021 拓展 实现自定义的通知栏效果: 这里要用到RemoteViews ...

  9. Intent和Intent Filter Context

    http://www.android-doc.com/reference/android/content/Intent.html An intent is an abstract descriptio ...

  10. std::bind(二)

    bind - boost 头文件: boost/bind.hpp bind 是一组重载的函数模板. 用来向一个函数(或函数对象)绑定某些参数. bind的返回值是一个函数对象. 它的源文件太长了. 看 ...