IT技术博客大学习 共学习 共进步

HTML5本地存储初探(三)

Time Machine 2010-04-14 13:39:26 浏览 3,385 次

    完成了数据的本地存储,就要将文件存储也搞定。为了实现文件的本地存储,html5搞了一个叫 manifest 的文件,这个文件就是一个缓存清单,把需要缓存在客户端的文件告诉浏览器。manifest是一个mimetype为 text/cache-manifest 的 纯文本文件。注意,这点很重要。

    下面是一个manifest文件的例子:

    manifest

    NETWORK, CACHE, FALLBACK 都是可选的。

    manifest文件必须以 CACHE MANIFEST 开头

    其后需要下载并缓存的文件使用相对或绝对路径皆可,每个资源一行。

    NETWORK段表明一些在线资源所在的域,所有这个域下的资源都不会被缓存,即使客户端处于离线状态,也会尝试去请求基于这些域的资源。

    CACHE段还不是很明白

    FALLBACK段下面每行都包含两部分内容,用空格分隔。后半部分是当前半部分路径不能访问时的备选路径(很拗),如上图就是,如果demoimages目录不能访问时,尝试访问images目录。

    manifest文件介绍就到这里,下面创建我们自己的manifest文件:

    我们只需要缓存两个文件即可,nbStyle.css 和 nbScript.js。还有index.html 本身,由于manifest文件会默认缓存引用自己的文件,所以index.html 不能在缓存列表中写出来:

CACHE MANIFEST# version: 2010-01-20 22:30nbStyle.cssnbScript.js

    就是这么简单了,我们将他保存为 notebook.manifest 文件,并和其它文件一起放在根目录。

    最后一个问题,如果将notebook.manifest的mimetype标识为 text/cache-manifest 类型呢?我知道有两种方法:

    1. 在站点根目录建立 .htaccess 文件,在其中声明.manifest 的mimetype ,这个需要修改下服务器的配置文件,我没有尝试成功。

    2. php环境在apache目录寻找一个为 “mime.types” 的配置文件,在其最后添加一行:

text/cache-manifest            manifest

    然后在index.html文件引用它:

    引用manifest

    搞定了这些东西,你就可以尝试用webkit访问你的应用,然后离线,再尝试使用它,程序应该也可以照常运行。

    至此,html5的离线存储基本介绍完了,下面附上打包的代码,代码本身没有什么难度,只是我写的太烂了:

    代码下载

    其实还远没有完,缓存下来的文件如果被更新了怎么办呢?如何通知客户端更新缓存其实也有api,慢慢的再探索吧。非常期待与大家探讨html5相关的问题。

建议继续学习

  1. HTML5 离线缓存-manifest简介 (阅读 16,963)
  2. HFile存储格式 (阅读 15,822)
  3. 我对技术方向的一些反思 (阅读 11,145)
  4. 淘宝图片存储架构 (阅读 10,844)
  5. 海量小文件存储 (阅读 9,704)
  6. HBase技术介绍 (阅读 7,943)
  7. 存储基础知识之——硬盘接口简述 (阅读 7,406)
  8. 面向移动设备的HTML5开发框架梳理 (阅读 7,203)
  9. JavaScript,只有你想不到 (阅读 6,165)
  10. 如果用户在5分钟内重复上线,就给他发警告,问如何设计? (阅读 5,885)