• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5的离线存储问题汇总

html5的离线存储问题汇总

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含html5,离线存储等相关知识,匿名希望在学习及工作中可以帮助到您
HTML5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用相关API),可以更新、删除离线存储等操作;

HTML5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如

对于manifest文件,要求:文件的mime-type必须是 text/cache-manifest类型。如果你是JAVA工程,在你的web.xml中配置请求后缀为manifest的格式:

manifest
text/cache-manifest
这样可以控制请求到的manifest文件格式为text/cache-manifest的。

这样可以控制请求到的manifest文件格式为text/cache-manifest的。

manifest文件的格式:

CACHE MANIFEST
# 这一句必须存在,而且必须放在头部
# 指明缓存入口
CACHE:
index.html
style.css
images/logo.png
scripts/main.js
# 以下资源必须在线访问
NETWORK:
login.php
# 如果index.php无法访问则用404.html代替
FALLBACK:
/index.php /404.html


其中 CACHE 不是必须存在的,可以直接在 CACHE MANIFEST 行之下直接写需要缓存的文件,在这里指明的文件将被缓存到浏览器本地。在NETWORK之下指明的文件,是强制必须通过网络资源获取的,在FALLBACK下指明的是一种失败的回调方案,比如上述index.php无法访问,那么就发出404.htm请求


这样几步就可以完成对离线存储的支持。接下来要思考的,是如何更新离线存储?

当用户本地再次联网的时候,本地的离线存储资源需要检查是否需要更新,这个更新过程,也是通过manifest的更新来控制的,更新了manifest文件,浏览器会自动的重新下载新的manifest文件并在下一次刷新页面的时候进行资源文件的重新请求(第三次刷新替换本地缓存为最新缓存),而且这个请求是全局性的,也就是所有在manifest缓存列表中的文件都会被请求一次,而不是单独请求某个特定修改过的资源文件,因为manifest是不知道哪个文件被修改过了的。

对于全局更新的担心是不必要的,因为对于没有更新过的资源文件,请求依旧是304响应,只有真正更新过的资源文件才是200.

关于304响应:

如果客户端发送的是一个条件验证(Conditional Validation)请求,则web服务器可能会返回HTTP/304响应,这就表明了客户端中所请求资源的缓存仍然是有效的,也就是说该资源从上次缓存到现在并没有被修改过.条件请求可以在确保客户端的资源是最新的同时避免因每次都请求完整资源给服务器带来的性能问题.

服务器会读取到这两个请求头中的值,判断出客户端缓存的资源是否是最新的,如果是的话,服务器就会返回HTTP/304 Not Modified响应,但没有响应体.客户端收到304响应后,就会从缓存中读取对应的资源.

当客户端缓存了目标资源但不确定该缓存资源是否是最新版本的时候,就会发送一个条件请求.在Fiddler中,你可以在Headers Inspector查找相关请求头,这样就可以辨别出一个请求是否是条件请求.

在进行条件请求时,客户端会提供给服务器一个If-Modified-Since请求头,其值为服务器上次返回的Last-Modified响应头中的日期值,还会提供一个If-None-Match请求头,值为服务器上次返回的ETag响应头的值:

另一种情况是,如果服务器认为客户端缓存的资源已经过期了,那么服务器就会返回HTTP/200 OK响应,响应体就是该资源当前最新的内容.客户端收到200响应后,就会用新的响应体覆盖掉旧的缓存资源.

只有在客户端缓存了对应资源且该资源的响应头中包含了Last-Modified或ETag的情况下,才可能发送条件请求.如果这两个头都不存在,则必须无条件(unconditionally)请求该资源,服务器也就必须返回完整的资源数据.


所以控制离线存储的更新,需要2个步骤,一是更新资源文件,二是更新manifest文件,特别的,更新manifest文件是不需要修改什么特定内容的,只要是这个文件随意一处被修改,那么浏览器就会感知,对于我们的资源文件通常名称是固定的,比如xxx.css,更新内容不会带有文件名更新的情况下,需要更新manifest文件怎么操作呢?一个比较好的方式是更新任意一处# 开头的注释即可,其目的只是告诉浏览器这个manifest文件被更新过。


以上的这些内容,其更新操作都是浏览器自动完成的。同样的,W3C定义了离线存储的API规范:http://www.whatwg.org/specs/web- ... k/#applicationcache

另外离线缓存需要注意以下几点:

// 更新,一般来说更新下载是通过用户**(如浏览器)自动完成的,但是这个方法适用于一些长期打开的页面,
比如邮件系统,可能这个页面是长期打开的,而不会有刷新动作,所以这个就比较适合做自动更新下载
void update();
// 取消 
void abort();
// 替换缓存内容 ,对于manifest文件的改变,通常是下一次的刷新才会触发下载更新,
第三次刷新才会切换使用新的缓存文件,通过这个方法,可以强制将缓存替换
void swapCache();

提供了如下的事件:


Event handler             Event handler event type
onchecking             checking
onerror                     error
onnoupdate             noupdate
ondownloading             downloading
onprogress             progress
onupdateready             updateready
oncached                     cached
onobsolete             obsolete

最后说一个对于manifest比较特别的地方:对于某个文件a.htm,其中有

比如:

1、如何计算PV UV,由于当前页面被强制加入manifest,那么PV 和UV的统计,成了一个难题,因为请求不再是发送到服务器;

2、对于某个使用manifest的文件,其带有的参数可能是随机性的统计参数,如sid=123sss, sid

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03HTML5移动端-viewport的详解
  • 2018-12-03html5使用canvas绘制一张图片_html5教程技巧
  • 2017-08-06HTML5 MiranaVideo播放器 (代码开源)
  • 2018-12-03html5 在pc端有没有类似于 初页app 一样的傻瓜制作 网站?急需!?
  • 2018-12-03element-ui对话框可拖拽的功能如何实现?(附代码)
  • 2018-12-03基本特性函数定义与用法汇总
  • 2018-12-03移动端HTML5音频与视频遇到的问题及解决方案
  • 2018-12-03用html5 js实现浏览器全屏
  • 2018-12-03详细介绍HTML5 5大存储方式总结
  • 2018-12-03h5页面如何调用摄像头代码分享

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html5配合css3实现带提示文字的输入框(摆脱js)
    • html5指南-7.geolocation结合google maps开发一个小的应用
    • HTML5实战与剖析之表单——自动获取焦点属性(autofocus属性)
    • HTML5 history新特性pushState、replaceState及两者的区别
    • 如何使用phonegap获取位置信息的实现方法
    • HTML5游戏框架cnGameJS开发实录-游戏循环篇
    • HTML5 CSS3新的WEB标准和浏览器支持
    • 什么情况下更适合使用 font-icon,相比图片 css sprites 有哪些优势?
    • HTML5是否真的可以取代Flash_html5教程技巧
    • 多视角入门教程:6个多视角零基础入门教程推荐

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有