没有合适的资源?快使用搜索试试~ 我知道了~
首页HTML5_离线存储技术
资源详情
资源评论
资源推荐

HTML5 离线存储技术
一、为什么要使用 html5 离线存储?
我们知道在最新的主流的浏览器中都已添加了对 HTML5 的 oine
storage 功能的支持,HTML5 离线存储功能非常强大,它的作用是:
在用户没有与因特网连接时,照样可以访问站点或应用,在用户与
因特网连接时,自动更新缓存数据。
二、离线支持情况
IE Firefox Safari Chrome Opera iPhone Android
× √ √ √ × √ √
三、谁已经使用离线?
离线网络应用程序的思想其实要早于 HTML5,部分实施也要早
些。也就是说,HTML5 有办法实现离线,但也有其他办法。我
将稍后在本章谈谈其中一个办法:Gears。这些早期使用者中
的一部分已经换成了 HTML5,并且其他的也正在切换中。
Gmail,Google(Docs)基于网络的邮箱
Zoho,在线生产力及合作应用程序 online productivity and
collaboration apps

Remember The Milk,在线任务管理系统
• WordPress,一个开源的个人发布平台
二、怎样实现 html5 离线存储?
1 – 添加 HTML5 doctype
第一件要做的事情是创建一个符合规范的 HTML5 文档。HTML5
doctype 相比于 xhtml 版本的 doctype 而言,要简单明了得多:
<!DOCTYPE html>
<html>
2 – 添加 .htaccess 支持
我们需要创建用于缓存页面的 manifest 清单文件。但在此之前,
先要在 .htaccess 文件中添加以下代码:
AddType text/cache-manifest .manifest
该 指 令 可 以 确 保 每 个 manifest 文 件 为 text/cache-manifest
MIME 类型。如果 MIME 类型不对,那么整个清单将没有任何效果,
页面将无法离线使用。
3 – 创建 manifest 文件

现在我们就来创建这个 manifest 清单文件,事情将会更加有趣。
新建一个文本文档并另存名为 oine.manifest,然后粘贴以下代
码,稍后我会解释。
CACHE MANIFEST
# 这一句必须存在,而且必须放在头部
# 指明缓存入口
CACHE
index.html
style.css
image.jpg
image-med.jpg
image-small.jpg
notre-dame.jpg
现在这份 manifest 文件已经能够完美工作了。原理很简单:在
CACHE 声明之后,罗列出所有需要缓存的文件。这对于缓存简单
页面已经来说足够。但是 HTML5 缓存还有更多可能。
CACHE MANIFEST
#This is a comment
CACHE
index.html
style.css

NETWORK:
search.php
login.php
FALLBACK:
/api oine.html
其中 CACHE 声明用于缓存 index.html 和 style.css 文件。同时
NETWORK 声明用于指定无需缓存的文件,比如登录页面。
最后一个是 FALLBACK 声明,这个声明允许你在资源不可用的情况
下,将用户重定向到特定文件,这个示例代码中是 oine.html。
4 – 关联 manifest 文件到 html 文档
现在,manifest 文件和 html 文档都已就绪。唯一需要做的是将
manifest 文件关联到 html 文档。
使用 html 元素的 manifest 属性:
<html manifest="/oine.manifest">
5 – 测试一下
完成后,使用 Firefox 3.5+ 本地访问 index.html 文件,会看到以
下浏览器提示信息:
剩余18页未读,继续阅读


















安全验证
文档复制为VIP权益,开通VIP直接复制

评论0