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. 淘宝中的UV,PV,IPV

    1.  UV & PV UV: 店铺各页面的访问人数,一个用户在一天内多次访问店铺被记为一个访客(去重) ; Unique visitors PV: 店铺内所有页面的浏览总量(次数累加); p ...

  2. BZOJ-1206 虚拟内存 Hash+离散化+Priority_Queue

    闻说HNOI每年都有一道Hash. 1206: [HNOI2005]虚拟内存 Time Limit: 50 Sec Memory Limit: 162 MB Submit: 330 Solved: 2 ...

  3. sqlserver 还原数据库

    1.解决什么问题? a.还原数据库的时候老是提示 不能独占 2.解决方案 ALTER DATABASE [ datebase] SET OFFLINE WITH ROLLBACK IMMEDIATE ...

  4. [NOIP2010] 提高组 洛谷P1541 乌龟棋

    题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩家控制一个乌龟棋子从起 ...

  5. eclipse中建python项目并运行

    1. Help → Install New Software 2.Enter http://pydev.org/updates 3.点击Click "Next" and " ...

  6. Smarty模板技术之foreach遍历数组实例全面讲解

    一.item属性用法 <?php $arr = array(, , ); $smarty->assign('testarrg', $arr); ?> 用Smarty中的foreach ...

  7. 关于使用客户端控件和jquery上传文件

    一.导入Jquery插件ajaxfileupload.js 下载地址:http://www.phpletter.com/Demo/AjaxFileUpload-Demo/ 使用方法: $.ajaxFi ...

  8. Linux samba配置

    更详细的配置地址:http://www.cnblogs.com/mchina/archive/2012/12/18/2816717.html 1 安装  yum -y install samba 2 ...

  9. Silverlight实例教程 – Datagrid,Dataform数据验证和ValidationSummary（转载）

    Silverlight 4 Validation验证实例系列 Silverlight实例教程 - Validation数据验证开篇 Silverlight实例教程 - Validation数据验证基础 ...

  10. 不引用office动态库导出excel

    public class OutExcelReport { /// <summary> /// 把 DataSet 的数据导成 Excel /// </summary> /// ...