IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

HTML5本地存储初探(三)

Time Machine 2010-04-14 13:39:26 累计浏览 3,490 次
本机暂存

    完成了数据的本地存储,就要将文件存储也搞定。为了实现文件的本地存储,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. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. HTML5 离线缓存-manifest简介 (累计阅读 17,102)
  2. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  3. jQuery的data()方法 (累计阅读 8,651)
  4. 前端必须熟悉的10个CSS3属性 (累计阅读 7,718)
  5. 面向移动设备的HTML5开发框架梳理 (累计阅读 7,418)
  6. 30个超棒的404错误页面 (累计阅读 7,301)
  7. HTML5+CSS3 loading 效果收集 (累计阅读 6,438)
  8. 给HTML初学者的30条最佳实践 (累计阅读 5,808)
  9. Phonegap + HTML5 开发经验小结 (累计阅读 5,344)
  10. HTML5本地存储初探(二) (累计阅读 5,215)