HTML5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地,这样后续的页面重新加载将使用本地资源文件,在离线情况下可以继续访问web应用,同时通过一定的手法(更新相关文件或者使用相关API),可以更新、删除离线存储等操作;

HTML5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的,使用如 来引入一个manifest文件,这个文件的路径可以是相对的,也可以是绝对的,如果你的web应用很多,而且希望能集中管理manifest文件,那么静态文件服务器是个不错的选择。

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

manifest

text/cache-manifest

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

manifest文件的格式:

CACHE MANIFEST# 这一句必须存在,而且必须放在头部# 指明缓存入口CACHE:index.htmlstyle.cssimages/logo.pngscripts/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.

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

以上的这些内容,其更新操作都是浏览器自动完成的。同样的,W3C定义了离线存储的API规范

API:

// 更新,一般来说更新下载是通过用户**(如浏览器)自动完成的,但是这个方法适用于一些长期打开的页面,比如邮件系统,可能这个页面是长期打开的,而不会有刷新动作,所以这个就比较适合做自动更新下

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,其中有 ,那么离线存储中,会自动将a.htm加入到列表中,这意味着a.htm的再次刷新将从本地缓存中获取,这样的机制从官方得到的答复是“特别的设计”,而对我们来说,这种强加的特性在后续的开发过程中会有不少问题。

比如:

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

2、对于某个使用manifest的文件,其带有的参数可能是随机性的统计参数,如sid=123sss, sid=234fff ,尤其是比如商品详情的id字段等,这样每个页面都自动加入到manifest中,将会带来很大的存储开销,而且是毫无意义的;

所以伴随而来的,是如何在现有的体系架构下进行数据统计的难题,一个常规的方案是进入离线存储页面后自动发出ajax请求,以告知服务器统计PV UV;

对于第二个问题,可能就比较棘手,但是将GET请求的方式改成POST的方式确实是个解决问题的方案。

html5离线储存不足,html5的离线存储问题相关推荐

  1. [html] 浏览器是怎么对HTML5的离线储存资源进行管理和加载的

    [html] 浏览器是怎么对HTML5的离线储存资源进行管理和加载的 在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根 ...

  2. [html] HTML5的文件离线储存怎么使用,工作原理是什么?

    [html] HTML5的文件离线储存怎么使用,工作原理是什么? localstorge 利用浏览器的本地存储可以缓存信息 ,在创建数据的时候引入创建好的数据 cookie 好像也可以 个人简介 我是 ...

  3. [html] 简述下html5的离线储存原理,同时说明如何使用?

    [html] 简述下html5的离线储存原理,同时说明如何使用? 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些 ...

  4. HTML5的离线储存

    在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件.         原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储 ...

  5. html5 离线浏览,HTML5的离线储存怎么使用?

    这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [ HTML5的 ...

  6. html文件离线可以打开,HTML5的离线储存怎么使用

    大家好,我是IT修真院深圳分院第02期学员孙剑立,一枚正直善良的web程序员. 今天给大家分享一下,修真院官网CSS任务15中有关HTML5的离线储存怎么使用? 1.背景介绍 HTML5提供了很多新的 ...

  7. HTML5的离线储存怎么使用?

    这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [ HTML5的 ...

  8. html5 离线资源缓存,html5的离线缓存使用方法

    html5的离线缓存使用方法 发布时间:2020-06-15 10:51:01 来源:亿速云 阅读:109 作者:Leah 这篇文章将为大家详细讲解有关html5的离线缓存使用方法,小编觉得挺实用的, ...

  9. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

最新文章

  1. 基于大数据的Uber数据实时监控(Part 4:Spark Streaming、DataFrames和HBase)
  2. 给初恋女孩的信....
  3. eclipse没有日志_IPFS技术最新进展:抵抗eclipse攻击的能力
  4. pythonsuper_python中的super()是什么意思呢
  5. Maven插件之buildnumber-maven-plugin
  6. SAP Spartacus split view右边视图的overflow属性三种不同的值
  7. CoreOS上的Fleet,第二部分
  8. 前缀和优化+计蒜客 泡咖啡
  9. 上下div高度动态自适应--另类处理方案
  10. 个人自学ccna的资料+工大瑞普模拟器
  11. 一加8渲染图曝光:后置三摄/五种配色可选
  12. win11如何获取推送 Windows11系统电脑获取推送的设置方法
  13. tts文字转语音_Android文字转语音(TTS)
  14. 一些代码规范(收集)
  15. matlab 神经识别取整数_Matlab取整
  16. bom_clear.php,金蝶KIS专业版常用SQL语句
  17. C#读取Excel文件(*.xls)|*.xls(2种方法)
  18. 第十一章 卡米洛特的黑暗时代
  19. 使命召唤 高级战争 闪退_使命召唤:现代战争进入第5季
  20. UE4 虚幻 常用的流程控制蓝图节点介绍

热门文章

  1. LeetCode 696. 计数二进制子串
  2. java jdbc操作类_Java-编写一个jdbc操作类
  3. asp.net接受表单验证格式后再提交数据_如何解析 el-form-renderer 表单渲染器1.14.0...
  4. 太原理工电子信焦工程_电气工程及其自动化专业毕业后做什么工作?近几年就业和收入怎样...
  5. coturn的负载均衡特性_高性能负载均衡
  6. 机器学习算法--ALS
  7. vue变量传值_Vue各类组件之间传值的实现方式
  8. python的输出函数_Python
  9. 谈谈NLP下一个主战场:万亿参数的预训练模型!
  10. 一般化机器学习与神经网络