TGideas实例：加载，不只是少一点点(2)

5，我们使用HTML5新提供的online时间在页面加载的时候判断手机是否在线。监听window的online和offline时间，可以判断手机是不是已经联网。一旦检测到手机联网，我们就可以调用applicationCache对象的update方法，去检测manifest文件是否有更新，如果有，下载新的版本。当updateready时，使用swapCache方法刷新缓存。

当然swapCache不能刷新页面的内容，只是把离线存储的文件更新成我们下载的新内容，我们还需要再使用JS替换页面的内容。

图2-5 离线存储进阶应用

1.1.3 残缺美

在使用离线存储的时候，总有些感到不是很爽的地方，列出来吐吐槽。

首先是两个更新的问题。我们知道，修改manifest文件后，浏览器会重新下载文件，而且是全部重新下载。这其实很蛋疼，有时候我们只需要更新其中一个文件，有点儿殃及池鱼的感觉。另外，在更新manifest文件后，我们需要刷新两次页面才能将最终的新内容呈现在页面上。

然后，如果我有很多文件要存储，需要把文件一个一个列入cache段里，就算使用程序生成，出来的manifest文件也有一定的体积。对于一个需要缓存300个文件的页面，使用相对路径，生成的manifest文件也有4K。在碰上更新的话，下载量有点儿大。

图2-6 APP有200多个小图标需要缓存

最后，对于同一个页面的带参URL路径，离线存储会当成不同的新文件进行缓存。如果您有100个不同的参数需要穿，而用户竟然访问过这100个文件，那就……

图2-7 如果您有100个不同的传参

1.2 本地存储

1.2.1 本地存储的方法

userData是IE提供的一个本地存储方法，他将需要存储的内容放置在本地的一个XML文件中，并在页面的一个元素中设置一个调用的锚点。具体使用方法为：使用getElementById获取页面内的一个元素，使用addBehavior(“#default#userData”)对其添加本地存储的行为；使用setAttribute将需要存储的内容对其进行赋值，并用save(“XXX”)方法将内容存储在名