本来这篇文章想叫《挺起你的HTML5》或者《让HTML5飞》或者神马其他的，但是为了更好的体现主题，我就用这个直白点的题目吧
![[酷]](http://img.it610.com/image/product/2cb3e48162834eb4a08ea36c3810d48b.gif){kind=small}
~
随 着各种智能手机(iPhone、Android)大行其道，App模式的应用开发变得热火朝天，反观Web领域则黯然失色。然而即将（或者说已 经）到来的HTML5，又为Web注入了新鲜的鸡血，让我等Web码农再次激动不已——我们可以用HTML、CSS、JavaScript开发手机应用 了！可以实现绝大部分Native App的功能，跨平台，自动更新，即需即取……亲，只需要有浏览器哟！而且没有恶心的IE6
![[喜欢]](http://img.it610.com/image/product/a035c828984840d08295804cd25c1dfe.gif){kind=small}
~
做任何一个应用都离不开两种东西：文件和数据。下面我就以一个简单的小应用来介绍一下如何开发一个Web应用，让它能够在Offline的情况下取得文件和数据。
Cache Manifest
首先，请自行实现一个包含图片、JavaScript、CSS的普通HTML页面。
显而易见的，这个页面所包含的文件有HTML、JavaScript、CSS、图片。为了让这个页面能够离线访问，我们必须告诉浏览器，它要缓存那些文件，让我们下次访问的时候直接在本地取即可。
HTML5给我们提供了一种Cache Manifest的机制，让我们实现这样的功能。Cache Manifest是通过一个 .manifest为后缀的文件来配置需要缓存的或者一定要保持联网的文件，格式如下：
CACHE MANIFEST
# VERSION 1.0
# 直接缓存的文件
CACHE:
index.html
img.jpg
script.js
stylesheet.css
# 需要在时间在线的文件
NETWORK:
/wp-admin/
# 替代方案
FALLBACK:
/ajax/ ajax.html
同时，我们要给页面的html标签添加一个manifest属性：
<html manifest="到Manifest文件的路径.manifest">
还有一点要注意的，就是Manifest文件的MIME类型必须正确，对于Apache有两种设置方法（IIS没研究过），一种是在Apache的配置文件mime.types中加上：
text/cache-manifest manifest
一种是在网站的.htaccess文件中加上：
AddType text/cache-manifest manifest
最后，最好重启一下你的服务器~~~
使用了Cache Manifest机制后，浏览器就不会自动更新你所缓存的内容了，如果想更新客户端缓存的内容，修改.manifest文件的任意内容即可。修改版本号是一种推荐的做法，即上面的“#VERSION 1.0”（这是一个注释），甚至可以说是最佳实践。
如果想了解更多，请看 这里 。
Local Storage
localStorage是Web Storage存储规范中的一部分(虽然大家很喜欢把它归到HTML5的东西里面去)，目前多数浏览器都已经支持了（ie8+也支持喔~）。
这是一个易学易用的东西，用于保存key-value形式的键值对。说到键值对肯定很容易想到Cookie，不过Cookie在每次请求中都会被发送到服务器端，如果使用大数据集合的话会有性能问题，在传输中也会有安全问题。
下面就讲讲localStorage的使用吧。
首先，在召唤localstorage之前当然要检测一下是否可用：
//检测localStorage是否可用
//本段代码来自<Dive Into HTML5>
function supports_html5_storage() {
try {
//不懂为啥要写这么复杂
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
使用localstorage的方式很简单, 直接像访问对象一样访问它即可:
//设置数据 setItem
localStorage.setItem("myKey", "myValue");
//获取数据 getItem
var data= localStorage.getItem("myKey");
//还能用数组这样的格式来访问
localStorage["myKey2"] = "myValue2";
var data2 = localStorage["myKey2"];
//移除指定数据
localStorage.removeItem("myKey2");
//清空数据
localStorage.clear();
操作结果可以在“开发人员工具”中看到
一些LocalStorage的注意事项：
- localStorage要通过域名访问的方式才能起作用，直接打开本地文件是不行滴哟~
- 俺们保存的都是string，如果是int或者float的话，get回来之后记得转换一下；
- 本地存储数据在同样域名下的网页间是共享的，即便是在多个浏览器标签页中；
- 使用 http:// 连接的页面是看不到使用 https:// 连接会话中的数据库的。
有了Cache Manifest和LocalStorage这两个利器，是不是觉得HTML5开发手机离线应用开始有这么点眉目了？
原文： http://rolfzhang.com/articles/522.html
