离线应用与客户端存储：支持离线Web 应用开发是HTML5 的另一个重点。所谓离线Web 应用，就是在设备不能上网的情况下仍然可以运行的应用。HTML5 把离线应用作为重点，主要是基于开发人员的心愿。前端开发人员一直希望Web 应用能够与传统的客户端应用同场竞技，起码做到只要设备有电就能使用。
开发离线Web 应用需要几个步骤。首先是确保应用知道设备是否能上网，以便下一步执行正确的操作。然后，应用还必须能访问一定的资源（图像、JavaScript、CSS 等），只有这样才能正常工作。最后，必须有一块本地空间用于保存数据，无论能否上网都不妨碍读写。HTML5 及其相关的API 让开发离线应用成为现实。
1.离线检测：开发离线应用的第一步是要知道设备是在线还是离线，HTML5为此定义了一个navigator.onLine属性，这个属性值为true 表示设备能上网，值为false 表示设备离线。这个属性的关键是浏览器必须知道设备能否访问网络，从而返回正确的值。实际应用中，navigator.onLine 在不同浏览器间还有些小的差异。
- IE6+和Safari 5+能够正确检测到网络已断开，并将navigator.onLine 的值转换为false。
- Firefox 3+和Opera 10.6+支持navigator.onLine 属性，但你必须手工选中菜单项“文件 → Web开发人员（设置）→ 脱机工作”才能让浏览器正常工作。
- Chrome 11 及之前版本始终将navigator.onLine 属性设置为true。这是一个有待修复的bug。（在2011 年10 月已被修复）
由于存在上述兼容性问题，单独使用navigator.onLine 属性不能确定网络是否连通。即便如此，在请求发生错误的情况下，检测这个属性仍然是管用的。以下是检测该属性状态的示例。
if (navigator.onLine){
//正常工作
} else {
//执行离线状态时的任务
}除navigator.onLine 属性之外，为了更好地确定网络是否可用，HTML5 还定义了两个事件：online 和offline。当网络从离线变为在线或者从在线变为离线时，分别触发这两个事件。这两个事件在window 对象上触发。
EventUtil.addHandler(window, "online", function(){
alert("Online");
});
EventUtil.addHandler(window, "offline", function(){
alert("Offline");
});为了检测应用是否离线，在页面加载后，最好先通过navigator.onLine 取得初始的状态。然后，就是通过上述两个事件来确定网络连接状态是否变化。当上述事件触发时，navigator.onLine 属性的值也会改变，不过必须要手工轮询这个属性才能检测到网络状态的变化。
支持离线检测的浏览器有IE 6+（只支持navigator.onLine 属性）、Firefox 3、Safari 4、Opera 10.6、Chrome、iOS 3.2 版Safari 和Android 版WebKit。
2.应用缓存：HTML5 的应用缓存（application cache），或者简称为appcache，是专门为开发离线Web 应用而设计的。Appcache 就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。下面是一个简单的描述文件示例。
CACHE MANIFEST
#Comment
file.js
file.css在最简单的情况下，描述文件中列出的都是需要下载的资源，以备离线时使用。
要将描述文件与页面关联起来，可以在<html>中的manifest 属性中指定这个文件的路径，例如：
<html manifest="/offline.manifest">以上代码告诉页面，/offline.manifest 中包含着描述文件。这个文件的MIME 类型必须是text/cache-manifest。
虽然应用缓存的意图是确保离线时资源可用，但也有相应的JavaScript API 让你知道它都在做什么。这个API 的核心是applicationCache 对象，这个对象有一个status 属性，属性的值是常量，表示应用缓存的如下当前状态。
- 0：无缓存，即没有与页面相关的应用缓存。
- 1：闲置，即应用缓存未得到更新。
- 2：检查中，即正在下载描述文件并检查更新。
- 3：下载中，即应用缓存正在下载描述文件中指定的资源。
- 4：更新完成，即应用缓存已经更新了资源，而且所有资源都已下载完毕，可以通过swapCache()来使用了。
- 5：废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存。
应用缓存还有很多相关的事件，表示其状态的改变。以下是这些事件。
- checking：在浏览器为应用缓存查找更新时触发。
- error：在检查更新或下载资源期间发生错误时触发。
- noupdate：在检查描述文件发现文件无变化时触发。
- downloading：在开始下载应用缓存资源时触发。
- progress：在文件下载应用缓存的过程中持续不断地触发。
- updateready：在页面新的应用缓存下载完毕且可以通过swapCache()使用时触发。
- cached：在应用缓存完整可用时触发。
一般来讲，这些事件会随着页面加载按上述顺序依次触发。不过，通过调用update()方法也可以手工干预，让应用缓存为检查更新而触发上述事件。
applicationCache.update();update()一经调用，应用缓存就会去检查描述文件是否更新（触发checking 事件），然后就像页面刚刚加载一样，继续执行后续操作。如果触发了cached 事件，就说明应用缓存已经准备就绪，不会再发生其他操作了。如果触发了updateready 事件，则说明新版本的应用缓存已经可用，而此时你需要调用swapCache()来启用新应用缓存。
EventUtil.addHandler(applicationCache, "updateready", function(){
applicationCache.swapCache();
});支持HTML5 应用缓存的浏览器有Firefox 3+、Safari 4+、Opera 10.6、Chrome、iOS 3.2+版Safari及Android 版WebKit。在Firefox 4 及之前版本中调用swapCache()会抛出错误。
3.数据存储：随着Web 应用程序的出现，也产生了对于能够直接在客户端上存储用户信息能力的要求。想法很合乎逻辑，属于某个特定用户的信息应该存在该用户的机器上。无论是登录信息、偏好设定或其他数据，Web 应用提供者发现他们在找各种方式将数据存在客户端上。这个问题的第一个方案是以cookie 的形式出现的，cookie 是原来的网景公司创造的。一份题为“Persistent Client State: HTTP Cookes”（持久客户端状态： HTTP Cookies ） 的标准中对cookie 机制进行了阐述（ 该标准还可以在这里看到：http://curl.haxx.se/rfc/cookie_spec.html）。今天，cookie 只是在客户端存储数据的其中一种选项。
- Cookie：HTTP Cookie，通常直接叫做cookie，最初是在客户端用于存储会话信息的。该标准要求服务器对任意HTTP 请求发送Set-Cookie HTTP 头作为响应的一部分，其中包含会话信息。例如，这种服务器响应的头可能如下：
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value这个HTTP 响应设置以name 为名称、以value 为值的一个cookie，名称和值在传送时都必须是URL 编码的。浏览器会存储这样的会话信息，并在这之后，通过为每个请求添加Cookie HTTP 头将信息发送回服务器，如下所示：
GET /index.html HTTP/1.1
Cookie: name=value
Other-header: other-header-value发送回服务器的额外信息可以用于唯一验证客户来自于发送的哪个请求。
1. 限制：cookie 在性质上是绑定在特定的域名下的。当设定了一个cookie 后，再给创建它的域名发送请求时，都会包含这个cookie。这个限制确保了储存在cookie 中的信息只能让批准的接受者访问，而无法被其他域访问。
由于cookie 是存在客户端计算机上的，还加入了一些限制确保cookie 不会被恶意使用，同时不会占据太多磁盘空间。每个域的cookie 总数是有限的，不过浏览器之间各有不同。如下所示。
- IE6 以及更低版本限制每个域名最多20 个cookie。
- IE7 和之后版本每个域名最多50 个。IE7 最初是支持每个域名最大20 个cookie，之后被微软的一个补丁所更新。
- Firefox 限制每个域最多50 个cookie。
- Opera 限制每个域最多30 个cookie。
- Safari 和Chrome 对于每个域的cookie 数量限制没有硬性规定。
当超过单个域名限制之后还要再设置cookie，浏览器就会清除以前设置的cookie。IE 和Opera 会删除最近最少使用过的（LRU，Least Recently Used）cookie，腾出空间给新设置的cookie。Firefox 看上去好像是随机决定要清除哪个cookie，所以考虑cookie 限制非常重要，以免出现不可预期的后果。
浏览器中对于cookie 的尺寸也有限制。大多数浏览器都有大约4096B（加减1）的长度限制。为了最佳的浏览器兼容性，最好将整个cookie 长度限制在4
最低0.47元/天 解锁文章
319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
