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. 标题右边10px位置紧跟发布时间

    一个ul列表,拥有若干li,内容是新闻标题,标题右边10px位置紧跟发布时间,当标题过长需要控制标题width,需要兼容ie6,不能用max-width h4{font-size:14px;heigh ...

  2. 斯坦福大学CS224d基础1：线性代数回顾

    转自 http://blog.csdn.net/han_xiaoyang/article/details/51629242 斯坦福大学CS224d基础1:线性代数知识 作者:Zico Kolter ( ...

  3. TCP,IP,HTTP,SOCKET区别和联系

    物理层-- 数据链路层-- 传输层--                       TCP协议 会话层-- 我 们在传输数据时,可以只使用(传输层)TCP/IP协议,但是那样的话,如 果没有应用层,便 ...

  4. 通过ajax访问aspx的CodeBehind中的方法

    引言 在项目中突然看到,aspx中的ajax可以访问aspx.cs中的方法,觉得很新奇,也许是lz少见多怪,不过,真的有发现新大陆似的那种兴奋,你也许知道这代表什么,学会了这种方式,代表你以后,可以建 ...

  5. 9个 SSH常用命令选项

    9个 SSH常用命令选项 SSH 是什么 SSH(全称 Secure Shell)是一种加密的网络协议.使用该协议的数据将被加密,如果在传输中间数据泄漏,也可以确保没有人能读取出有用信息.要使用 SS ...

  6. 【社招】来杭州吧，阿里国际UED招前端~~

    来杭州吧,阿里国际UED招前端~~ 依稀记得,几年前在北京的日子,两点一线的生活方式,似乎冲淡模糊了身边的一切,印象最深刻的莫过于北京的地铁站了吧(因为只有等地铁,搭地铁的时候,才能够停下脚步,静静地 ...

  7. 转>>在同一个sql语句中如何写不同条件的count数量

    今天在做Portal中的Dashboard展现的时候,需要对多个统计字段做展现,根据我现在的掌握水平,我只能在sql调用构建器中实现一种sql语 句返回的resultSet做展现.没有办法,只能从数据 ...

  8. PyOpenGL利用文泉驿正黑字体显示中文字体

    摘要:在NeHe的OpenGL教程第43课源代码基础上,调用文泉驿正黑字体实现中文字体的显示 在OpenGL中显示汉字一直是个麻烦的事情,很多中文书籍的文抄公乐此不疲地介绍各种方法及其在windows ...

  9. 批量删除wordpress垃圾评论留言

    wordpress博客的存在,垃圾评论注定会找上门来.大家还可以用Akismet.Bad Behavior.Spam Karma等一些其他的插件或者直接用程序写个验证码函数对留言进行验证来过滤 垃圾评 ...

  10. Android 源码编译错误

    参考文章:http://blog.csdn.net/brightming/article/details/49763515/ Building with Jack: out/target/common ...