留下痕迹——HTML5-客户端存储

HTML5 离线缓存原理

什么是离线缓存?

HTML5 引入离线缓存(Application Cache),这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

优势

• 离线浏览

  • 用户可在应用离线时使用他们

• 速度

  • 已缓存资源加载得更快

• 减少服务器负载

  • 浏览器将只从服务器下载更新过或更改过的资源

应用场景

h5 游戏及一些页面内容不经常会变动,相对较为固定的内容

原理

HTML5 的离线存储是基于一个 manifest 文件(缓存清单文件,后缀为.appcache)的缓存机制(不是存储技术),通过这个文件上的清单解析离线存储资源,这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态时,浏览器会通过被离线存储的数据进行页面展示。

与传统浏览器缓存区别

离线缓存是针对整个应用,浏览器缓存是单个文件。 离线缓存断网了还是可以打开页面,浏览器缓存不行。 离线缓存可以主动通知浏览器更新资源。