处理html5离线应用程序存储的一些问题。

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获取的值在页面是可以不缓存的。

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

时间： 2024-10-06 16:48:39

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

HTML5 离线缓存管理库

一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionstorage和cookie.但是这些传统的方式有着致命的弊端.首先这些传统的存储方式的最大使用空间有 限,最多不超过5M;其次它们处理大规模的结构化数据的能力有限.鉴于传统方式的局限性,HTML5提出了三种新的离线缓存解决方案:Web SQL,indexedDB和File System. 其中Web S

利用HTML5开发Android(6)---构建HTML5离线应用

需要提供一个cache manifest文件,理出所有需要在离线状态下使用的资源例如 Manifest代码 1 CACHE MANIFEST 2 #这是注释 3 images/sound-icon.png 4 images/background.png 5 clock.html 6 clock.css 7 clock.js 8 9 NETWORK: 10 test.cgi 11 12 CACHE: 13 style/default.css 14 15 FALLBACK: 16 /files/pr

【html5】html5离线存储

html5本地存储之离线存储 1.为什么使用离线存储 ①最新的主流的浏览器中都已添加了对HTML5的offline storage功能的支持,HTML5离线存储功能非常强大, 它的作用是:在用户没有与因特网连接时,照样可以访问站点或应用,在用户与因特网连接时,自动更新缓存数据,是我们的网站的适应性和应用型更强 2.准备工作 1.服务器配置 1.需要在 apache配置文件加:① AddType text/cache-manifest .manifest 2.创建缓存清单文件xxx.manifes

html5离线储存,application cache,manifest使用体验

最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求,大大影响了加载速度和用户体验,这时候我想到了HTML5的离线储存. 经过简单的了解之后,觉得这个可以有,但很快我又就发现,HTML5离线储存并不适于这次的项目. 原因如下: 1. 一旦页面指定了manifest,那么这个页面就一定被储存下来.如果有一个动态页面,不想缓存页面的内容,只想缓存页面所引用的css,js,img,但抱歉,这个没有办法做到.我

HTML5离线缓存（Application Cache）

HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. Manifest 文件 manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容). manifest 文件可分为三个部分: CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓

HTML5 离线存储应用案例

HTML5 所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用相关API),可以更新.删除离线存储等操作: 下面简单来使用一下离线存储:  第一:要在 apche 服务器的 httpd.conf文件中添加下面这段话 AddType text/cache-manifest .manifest 第二:建一个 1.manifest 文件, 然后这里的清单是 #下面这句话必须存在,而且必须放在

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

吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥抱HTML5.但WeX5小编编也发现,依然有相当一部分从业者,仍然对HTML5将信将疑,仍对原生App技术恋恋不舍.小编编特意转发分享下文,HTML5技术崛起,从离线存储技术是可见一斑的. (正文)随着Web App的发展,越来越多的移动端App使用HTML5的方式来开发,除了一些Hybrid Ap

html5离线缓存使用

html5 离线缓存使用以及注意事项 1.index.html中加入离线缓存的声明文件 如:<!DOCTYPE html><html manifest="test.appcache"> test.appcache 与 index.html在相同路径下. 2.服务器端加入MIME TYPE声明:tomcat如下 web.xml中加入<mime-mapping> <extension>manifest</extension> &l

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

[IT168 技术]HTML5近十年来发展得如火如荼,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化.HTML功能越来越丰富,支持图片上传拖拽.支持localstorage.支持web sql database.支持文件存储api等等.它任重而道远,致力于将Web带入一个更为成熟的应用平台.在所有炫酷特性中,最让我喜欢的是它具有离线缓存Web应用的功能. 开发离线Web 应用程序:三大核心功能 在开发支持离线的 Web 应用程序时,开发者通常需要使用以下三个方面的功能: