记录HTML5离线存储的一些比较容易忽略的知识点

1 当HTML文件中关联了manifest文件,那么当前文件会默认被缓存。但是缓存的也仅仅是这个HTML文件,如果该文件中关联了其他文件,如JS,CSS,图片,那么

就需要手动将这些文件加入manifest清单列表中,否则离线后这些文件不会被加入缓存之中,导致载入失败。

2 当断网之后,更新manifest和关联文件,刷新页面,会报错:Manifest fetch failed ,因为manifest列表被更新,那么浏览器会发送请求进行更新manifest列表中的文件,

但是因为断网,更新失败,所以报错。

3 联网状态,当更新manifest和关联文件后,刷新页面后,会进行更新操作,但是当前刷新,其请求仍然是上一次缓存的内容,刷新之后,上次的缓存才会被更新,故而需要

到下次刷新页面新的缓存才会生效才会生效。当然这一切的前提是在 不手动用JS更新的情况下。

4 applicationCache事件,其中update()是更新缓存文件,即根据manifest列表从服务器上更新文件,当前前提是manifest清单有所改动,并且服务器文件有所变动。而

swapCache()则是替换缓存文件,将更新下来的缓存文件替换原来的缓存文件。

其实这里有小BUG,或者是我没搞懂,我只要调用了update(),即便不调用swapCache()貌似也能替换原来的缓存,不知道是不是刷新页面的时候,浏览器自动执行了这

一步。。。这里求教。

时间: 2024-08-30 01:30:45

记录HTML5离线存储的一些比较容易忽略的知识点的相关文章

【html5】html5离线存储

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

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 离线存储之Web SQL

HTML5 在离线存储之Web SQL 本篇没有考虑异步,多线程及SQL注入 WebDatabase 规范中说这份规范不再维护了,原因是同质化(几乎实现者都选择了Sqlite), 且不说这些,单看在HTML5中如何实现离线数据的CRUD,最基本的用法(入门级别)  1,打开数据库 2,创建表 3,新增数据 4,更新数据 5,读取数据 6,删除数据 事实上,关键点在于如何拿到一个可执行SQL语句的上下文, 像创建表,删除表,CRUD操作等仅区别于SQL语句的写法.OK,貌似"SqlHelper&q

让我们使用离线吧(HTML5离线存储)

什么是离线网络应用程序?乍一看,从以下几个方面来说就像一个矛盾.网页是需下载并呈现的.下载意味着网络连接.你怎能在离线的时候下载?当然,你不能.但你可以在你在线的时候下载.这就是HTML5离线应用程序怎样工作的. 最简单来说,一个离线网络应用程序就是一个URL的列表——HTML,CSS,JavaScript,图片,或者其他类型的资源.离线网络应用程序的 注意指向一个叫做名单文件并用于定位网络服务器上任何文本文件的列表.用于执行HTML5离线以用程序的网络浏览器将从名单文件中读取URL列表,下载这

HTML5离线存储和本地缓存

一.离线存储 有一个web应用有三个文件index.html,a.js,b.css,现在需要把js和css文件缓存起来 1.在index.html里加上<html manifest="test.manifest"> 2.manifest清单格式如下 CACHE MANIFEST #上面一句必须 #v1.0.0 #需要缓存的文件 CACHE: a.js b.css #不需要缓存的文件 NETWORK: * #无法访问页面 FALLBACK: 404.html 3.manife

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

manifest方法引入appcache文件,缓存页面,是html5的新特性,通过加载一次,下次自动读取缓存,加载速度快,离线也能加载.缺点就是,被加载的页面会被强制缓存所有的内容. 为了解决不加载所有内容这个问题,经过我反复研究,终于找到了两个解决方案,不多说,看代码. 引入html5离线存储,需要在页面头文件引入.appcache文件,如下: <html lang="zh-CN" manifest="${ctx }/plugins/mobileweb/web/vie

HTML5的五种客户端离线存储方案

最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie.WebStorage.IndexedDB以及FileSystem四种本地离线存储方式,对燃气监控系统的表计位置.朝向.开关以及表值等信息做了CURD的存取操作. http://www.hightopo.com/guide/guide/core/serialization/examples/example_exportimport.html HTM

html5的离线存储问题汇总

HTML5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用相关API),可以更新.删除离线存储等操作: HTML5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如 <html manifest='offline.manifest'> 来引入一个manifest文件,这个文件的路径可以是相对的,也可以是绝对的,如果你的web应用很