轻量高效的拓扑图组件
zh
  • Chinese

Safari Web Content Guide - 数据的客户端存储

2011-07-22 html web safari

数据的客户端存储

网页或网站程序有几种方式在客户端存储数据，你可以使用 JavaScript database 类，详见 Safari Client-Side Storage and Offline Applications Programming Guide, 在客户端存储程序数据或使用 HTML5 缓存资源文件，可以使网页在离线状态下依然可以显示，同样使用客户端缓存也可以提高网页的加载速度，降低网络连接数。本章节将描述如何利用HTML5程序缓存和数据的本地存储 要在客户端缓存资源，首先需要配置一个资源列表文件，并在主网页中申明这个列表文件，然后你可以使用JavaScript操作缓存以及相关操作。当没有可用网络时，之前被加载过的资源依旧可以正常显示。此外程序还可以缓存浏览器状态，这样之前在这太电脑或者设备上使用过的网页程序在离线时依旧可用 - 如在飞行模式  

创建清单文件

清单中列举这些资源 - 如 HTML, JavaScript, CSS, 和 图片文件 - 被下载和缓存，第一次网页加载后，清单中的资源将不再从服务器端加载而是从本地缓存中 清单文件具备这些属性

  • 必须可以通过 text/cache-manifest 类型被提供
  • 第一行包含文字 CACHE MANIFEST.
  • 随后行包含资源 URLs 或者注释
  • 注释为单行，且以字母 # 打头.
  • URLs 是需要缓存的资源文件的路径，必须是相对于清单文件的路径 ── 这与CSS中类似
  • 使用了 Manifest 申明的HTML 文件无需添加到清单中，详见 “申明一个清单文件”

如例，列表 9-1 显示的是包含一些图片资源的清单文件 Listing 9-1 Sample manifest file

CACHE MANIFEST
demoimages/clownfish.jpg
demoimages/clownfishsmall.jpg
demoimages/flowingrock.jpg
demoimages/flowingrocksmall.jpg
demoimages/stones.jpg
demoimages/stonessmall.jpg

申明一个清单文件

创建完一个清单文件后，你需要将他申明到网页文件中，如下添加 manifest 属性到 <html> 标签:

<html manifest="demo.manifest">

manifest 属性参数为清单文件的相对路径

对于多数情况，创建一个清单，并申明到网页就够了，做完这些，这些资源就可以自动缓存，如果你希望使用JavaScript操作这些缓存，阅读下面的章节

更新缓存

你可以等待程序自动更新或者通过JavaScript动态更新，只有在清单文件更改时，程序在会自动更新，清单中资源文件修改并不能导致程序的自动更新，如果清单文件字节匹配相同，则被认为没有修改，也就是说清单文件的修改时间变化并不会引发自动更新，如果这不满足你程序的需求，你可以使用JavaScript明确的更新。 注意，更新程序缓存可能导致异常，如果清单文件或者清单中的一个资源文件加载异常，则整个更新失败，如果更新失败，程序缓存不变 ── 浏览器依旧使用之前缓存的版本，如果更新成功，当网页重新加载时，启用新的缓存。 使用下面的JavaScript类更新程序缓存和检测缓存状态，每个文档有一个程序缓存对象，是 [DOMApplicationCache](http://developer.apple.com/library/safari/documentation/DataManagement/Reference/DOMApplicationCacheClassReference/DOMApplicationCache/DOMApplicationCache.html#//apple_ref/javascript/cl/DOMApplicationCache) 类的一个实例，这个缓存对象是 DOMWindow 对象的一个属性. 如，如下获取 DOMApplicationCache 对象:

cache = window.applicationCache;

你可以用下面的方法检测程序缓存状态:

if (window.applicationCache.status == window.applicationCache.UPDATEREADY)...

如果程序缓存为 UPDATEREADY 状态，你可以通过发送 update() 消息去更新:

window.applicationCache.update();

如果更新成功，交换新老缓存如下：

window.applicationCache.swapCache();

如果它返回 UPDATEREADY 状态，说明这个缓存已经被使用，参阅 DOMApplicationCache 文档 了解其他状态值，再次强调，只有缓存更新后网页加载才会使用新的缓存，而不是当前浏览器中显示的网页。

iPhone OS Note: 目前不支持通过JavaScript增加和删除缓存中的资源

缓存事件处理

你还可以使用JavaScript监听缓存事件，当程序缓存状态被修改或者更新失败时会派发相应的事件，你可以监听这些事件，并做出相应的处理 如，监听 updateready 事件，可在程序完成更新时发出通知，同样，监听 error 事件可以在更新失败时做出某种动作 - 如使用控制台记录错误信息

cache = window.applicationCache;
cache.addEventListener('updateready', cacheUpdatereadyListener, false);
cache.addEventListener('error', cacheErrorListener, false);

参看 [DOMApplicationCache](http://developer.apple.com/library/safari/documentation/DataManagement/Reference/DOMApplicationCacheClassReference/DOMApplicationCache/DOMApplicationCache.html#//apple_ref/javascript/cl/DOMApplicationCache) 文档了解完整的事件类型

Next Prev