代码改变世界

Javascript本地储存(3):离线web应用

2013-03-30 13:03  Barret李靖  阅读(1536)  评论(0编辑  收藏

  前两篇文章分别介绍了Cookie应用另一种本地储存方式,无论是cookie、userData还是localStorage都是一段保存在客户端磁盘的一段文本,他们可以被主动删除,但是本文要讲的“应用程序缓存”是HTML5中新增的一个技术,他允许web应用将应用程序自身本地保存到用户的浏览器中,他是不会随着用户清楚浏览器缓存而被清除的。

不像localStorage和sessionS只是保存web应用程序相关的数据,他是将应用程序本身保存起来——应用程序所需运行的所有文件(HTML、CSS、JavaScript、图片等)。——《Javascript权威指南(第六版)》Page-594

  “应用程序缓存”真正意义上不是“”缓存,更好的说法应该称之为“应用程序存储”。

 

Introduction [简单介绍]

  通过在应用程序主HTML页面的<html>标签中设置manifest属性,只想到清单文件就行了。这里的清单文件就是,将要缓存的文件列表。

<!DOCTYPE HTML>
<html manifest="myapp.appcache">
  <head>...</head>
  <body>...</body>
</html>

  清单文件格式也是有要求的,他的杭寿必须以“CACHE MANIFEST”字符串开始,其余就是要缓存的文件URL列表,一行一个URL。

CACHE MANIFEST
#上一行表示此文件是一个清单文件。本行为注释

#下面的内容都是应用程序依赖的资源文件的URL
myapp.html
myapp.js
myapp.css
images/backgorund.png

  有人可能会问了:那清单文件一定要以appcache作为未见的扩展名么?
  答案是否定的,web服务器真正识别清单文件的方式是通过"text/cache-manifest"这个MIME类型的一个清单。如果服务器将清单文件的Content-Type的头信息设置成其他MIME类型,那就不会缓存应