1、HTML 本地存储Local Storage介绍
2、HTML5 localStorage 操作使用
3、Web Database 介绍
4、HTML5 Web Database 操作使用
5、离线应用介绍
6、HTML5 实现离线应用
HTML5 离线内容更新
HTML 本地存储Local Storage介绍
本地存储相当于一个超大型的Cookie，可以通过浏览器存储相关数据
1、HTML5 localStorage 操作使用
在HTML5中，本地存储是一个window的属性，包括localStorage和 sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了。二者 用法完全相同
if(window.localStorage){
alert(‘浏览器支持！’);
} else{
alert(‘不支持！’);
}
2、HTML5 localStorage 操作使用
三种设置本地存储的方法
localStorage.t1 = “php”;
localStorage[“t2”] = “HTML5”;
localStorage.setItem(“t3″,”Jquery”);
三种访问本地存储的方法
localStorage.t1;
localStorage[“t2”];
localStorage.getItem(“t3″);
3、HTML5 localStorage 操作使用
其他扩展
localStorage.removeItem(); //清除
localStorage.clear() //清除所有
localStorage.length //获得多少键
localStorage.key() //获得存储的键内容
localStorage.getItem(localStorage.key(0))
eg:
localStorage
<script type=”text/javascript” src=”/jquery1.7.2.min.js”></script><script type=”text/javascript”>// <![CDATA[
$(document).ready(function(){
var storage = window.localStorage; //设置
storage.setItem(‘storage1’, ‘storage1’);
storage.storage2 = ‘storage2’;
storage[‘storage3’] = ‘storage3’; //删除
//storage.removeItem(‘storage1’);
storage.clear(); //获得
$(‘#storage1’).html(storage.storage1);
$(‘#storage2’).html(storage.getItem(‘storage2’));
$(‘#storage3’).html(storage[‘storage3’]);
});
// ]]></script>
storage1:<b id=”storage1″></b>
storage2:<b id=”storage2″></b>
storage3:<b id=”storage3″></b>
二、Web Database 介绍
1、Indexed Database介绍
Indexed Database，也可简称为IndexedDB（以前被称作WebSimpleDB），同样是一个Web客户端存储结构化数据的规范，在2009年由Oracle提出。如果说Web SQL Databae在客户端实现了传统的SQL数据库操作，那么Indexed Database更类似于
NoSQL的形式来操作数据库，其中最重要的是Indexed Database不使用SQL作为查询语言。其数据存储可以不需要固定的表格模式，也经常会避免使用SQL的JOIN操作，并且一般具有水平可扩展性。目前W3C官方也把焦点投到对Indexed Database
规范的制定当中来，而Microsoft和Mozilla是对这个规范重要的两个推动者，Firefox 4以上已经部分实现了Indexed DB API，并且IE 10中也将实现Indexed DB API。由于在手机等移动设备的浏览器中都没有实现Indexed DB API，所以其还有
一定的局限性，但这并不妨碍它作为未来的HTML5的焦点而存在。详细的Indexed Database规范可以参考官方网站。
2、 Web SQL Database介绍
Web SQL Database API实际上未包含在HTML 5规范之中，它是一个独立的规范，它引入了一套使用SQL操作客户端数据库的API，这些API有同步的，也有异步的，同步版本的API只在工作线程（Worker Threads）上有用，由于并不是所有的浏览
器都支持工作线程，一般情况下，都会使用异步API。它的核心方法有三个：openDatabase，transaction和executeSql。这些API已经被广泛的实现在了不同的浏览器里，尤其是手机端浏览器。虽然W3C官方在2011年11月声明已经不再维护Web
SQL Database规范，但由于其广泛的实现程度，了解这些API对 Web开发还是非常有必要的。
3、 Web Sql Database 操作使用
Web SQL数据库有三个核心方法：
1）打开数据库openDatabase()方法：
此方法创建数据库对象，既可以使用已有的数据库，也可以创建新的数据库。
window.openDatabase(“name”, “1.0版本“, “数据库描述“, “20000字节大小” );
2）事务transaction()方法：
此方法可以用于控制事务处理，执行提交操作或回滚操作。
database.transaction ( 函数（obj） )
3）执行SQL命令executeSql()方法：
此方法用于执行SQL查询。
db.transaction(function(tx){
tx.executeSQL(“SQL语句”)
});
Eg:
测试 WebSQL Database
<meta charset=”utf-8″ /></pre>
<form>id: <input id=”id” type=”input” /> title: <input id=”title” type=”input” /> time: <input id=”time” type=”input” /> <input id=”add” type=”button” value=”添加” /> <input type=”button” value=”修改” /> <input
id=”delete” type=”button” value=”删除” /> <input id=”deleteTable” type=”button” value=”删除表” />
<div id=”result”></div>
</form>
<pre>
离线应用介绍
Web2.0 技术鼓励个人的参与，每个人都是 Web 内容的撰写者。如果 Web 应用能够提供离线的功能，让用户在没有网络的地方（例如飞机上）和时候（网络坏了），也能进行内容撰写，等到有网络的时候，再同步到 Web 上，就大大方便了用
户的使用。HTML5 作为新一代的 HTML 标准，包含了对离线功能的支持
HTML5 实现离线应用
1) 让apache 、nginx 或 IIS 支持 .manifest 文件
AddType text/cache-manifest .manifest
2) 创建 manifest 文件（ 如：php.manifest ）
CACHE MANIFEST 声明文件头部
#This is a comment 离线存储文件
CACHE:
style.css
NETWORK: 需要网络调用的文件
search.php
FALLBACK: 资源失效或不可用时更新文件
404.html
3) 关联 manifest 文件到 html 文档
<html manifest=“php.manifest”>
浏览器兼容情况参考：
IE: 不支持
Firefox: 3.5+
Safari: 4.0+
Chrome: 5.0+
Opera: 10.6+
iPhone: 2.1+
Android: 2.0+
HTML5 离线内容更新
更新缓存
应用程序可以等待浏览器自动更新缓存，也可以使用 Javascript 接口手动触发更新。
自动更新
浏览器除了在第一次访问 Web 应用时缓存资源外，只会在 cache manifest 文件本身发生变化时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。
手动更新
开发者也可以使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update() 更新缓存。
window.applicationCache.status指示了缓存的状态：
0： UNCACHED页面完全没有被缓存，可能是没被设
1： IDLE已经被下载并可访问
2 ：CHECKING正在检查缓存是否需要更新
3： DOWNLOADING发现新版本正在更新
4： UPDATEREADY已经下载完成，下次离线访问就可用
5： OBSOLETE缓存清单文件访问失败，此页面会被从缓存中清除