【转】[学习]HTML5 js APIs
本文地址：http://www.lizhenwen.com/js/1141
尊重版权
一、新的选择器
- 根据类名匹配元素（DOM API），返回匹配到的元素数组，无匹配则返回空的数组。
var els = document.getElementsByClassName('section');
支持浏览器：IE9, FireFox 3.0+, Safari 3.2+, Chrome 4.0+, Opera 10.1+
- 根据css选择器匹配元素（Selectors API）：
querySelector和querySelectorAll。querySelector返回匹配到的第一个元素，如果没有匹配则返回nullvar els = document.querySelector("ul li:nth-child(odd)"); var els = document.querySelector("table.test > tr > td");
querySelectorAll返回所有匹配到的元素数组，如果没有匹配则返回空的数组var els = document.querySelectorAll("ul li:nth-child(odd)"); var els = document.querySelectorAll("table.test > tr > td");
支持浏览器：IE 8+, FireFox 3.5+, Safari 3.2+, Chrome 4.0+, Opera 10.1+
选择器效率测试见：http://jsperf.com/queryselectorall2
Opera的Selectors API明显经过优化，其余浏览器的getElementById效率是最高的。
Selectors API遵循CSS选择器效率规则
二、WEB本地存储（localStorage/sessionStorage）
Web Storage就是放大版的cookie——提供了比cookie更大的本地存储，并且不会向服务器发出请求，并提供了一些API。总之本地存储能更专业地处理本地数据
可以像对象字面量那样使用Web Storage：
localStorage.fresh = "lizhenwen.com"; //设置一个键值 var a = localStorage.fresh; //获取键值 delete localStorage["fresh"] //删除键值
或者使用它的API：
//清空storage localStorage.clear(); //设置一个键值 localStorage.setItem("fresh","lizhenwen.com"); //获取一个键值 localStorage.getItem("fresh"); //return "lizhenwen.com" //获取指定下标的键的名称（如同Array） localStorage.key(0); //return "fresh" //删除一个键值 localStorage.removeItem("fresh");
字面量方式比API更高效，也更方便，所以你懂的。
localStorage是永久性的保存，而sessionStorage在浏览器窗口关闭后就没有了（相当于Expire=0的cookie）。
支持浏览器：IE 8+, Firefox 3.0+, Safari 4.0+, Chrome 4.0+, Opera 10.5+
三、Web 本地数据库
有了本地数据库，我们可以进行更复杂的本地数据处理。本地数据库使用的是SQLite这款轻型数据库。
操作数据库简单的两个步骤：1.创建并打开数据库；2.执行sql语句
- 创建并打开数据库
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
上面的openDatabase我用了4个参数，依次为：
- 数据库名称
- 数据库版本号
- 数据库说明
- 数据库大小
未使用的第五个参数是：
- 创建数据库回调函数（在数据库创建后会执行回调函数，回调函数是可选的。）
- 执行sql语句
var db = openDatabase('mydb', '1.0', 'my first database', 2 * 1024 * 1024); db.transaction(function (tx) { //创建table foo tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)'); //插入数据到foo tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "synergies")'); });
插入数据时还可以传递动态值：
tx.executeSql('INSERT INTO foo (id, text) VALUES (?, ?)', [id, userValue]);
嗯，我想我需要去学习SQLite的SQL语法了。
支持浏览器：Safari 3.2+, Chrome 4.0+, Opera 10.5+
四、离线应用（Offline Web applications）
离线应用（Offline Web applications）将网页资源缓存到本地，可以减少对服务器的请求，并且可以在断线的情况下浏览网页。
使用离线应用需要两个步骤：
-
建立缓存设定文件(.manifest)
需要一个配置文件来设定哪些文件是需要缓存的：
CACHE MANIFEST #上面一行是必需的 #这是注释 #注释前面可以有空格 #但是必须是单独的一行 #空白的行也是会被忽略的 #下面列出来的文件是需要被缓存的 #或者你也可以在列这些文件之前用CACHE来标识 #需要注意的是一行一个文件 #也可以使用绝对路径或者URLs images/sound-icon.png images/background.png http://img.example.com/cross.png #下面列出的文件是需要在线加载的 #这些文件总是在线加载，除非断线了才会去尝试使用缓存的文件 NETWORK: comm.cgi #这是另一种设置需要缓存的文件方式 CACHE: style/default.css
注意manifest文件的MIME-type必须是
text/cache-manifest（需要服务器端设置） -
在网页中引入manifest文件
<html manifest="offline.manifest"> ... </html>
如此，经过上面两步，已经可以体验到离线应用的魅力了。
但在测试中发现，各浏览器更新缓存的机制各异：chrome修改manifest就可以更新缓存了，但却无法加载manifest之外的资源；而firefox需要手动删除本地缓存数据。
种种的这些兼容性问题，可以给NETWORK添加上通配符*来修正：
CACHE MANIFEST NETWORK: *
具体的原因可能是在启用离线应用后浏览器不会加载manifest设定之外的资源；而且firefox等也把manifest文件给缓存了，导致无法获取最新的manifest资源列表
现在来了解下离线应用的API：
/*当前文档的ApplicationCache对象*/ var cache = window.applicationCache; /* *当前worker的ApplicationCache对象 *worker在本文第五节介绍 */ var cache = self.applicationCache; /* *属性,返回当前离线应用的状态 * UNCACHED (数值0)：未启用离线应用 * IDLE (数值1)：已开启离线应用，但本地缓存的资源是最新的，并且未标记为废弃资源 * CHECKING (数值2)：当前更新缓存的状态为“检查中” * DOWNLOADING (数值3)：当前更新缓存的状态为“下载资源中” * UPDATEREADY (数值4)：当前更新缓存的状态为“更新完毕” * OBSOLETE (数值5)：已开启离线应用，但缓存资源都已标记为废弃 */ cache.status /* *方法,下载资源到本地 *如果没有cache需要更新，则抛出 INVALID_STATE_ERR 异常 */ cache.update(); /* *方法,更新缓存到最新的资源 *如果没有新的资源，则抛出INVALID_STATE_ERR异常 *并不会使本次加载的页面立即重新加载资源，仅有在执行该方法后刷新页面才能看到最新的资源。 */ cache.swapCache();
事件处理器：
| 事件名称 | 接口 | 执行时机 | 下一步将执行 |
|---|---|---|---|
| checking | Event | 检查是否需要更新，或者在第一次下载manifest文件时。 最先执行的事件 | noupdate, downloading, obsolete, error |
| noupdate | Event | manifest文件未修改，不需要更新 | Last event in sequence. |
| downloading | Event | 需要更新缓存，或者第一次下载资源时 | progress, error, cached, updateready |
| progress | ProgressEvent | 下载资源中 | progress, error, cached, updateready |
| cached | Event | 资源已下载完成，并且已完成缓存 | 最后的事件 |
| updateready | Event | 资源更新完毕，并且可以用swapCache()来启用新的缓存。 |
最后的事件. |
| obsolete | Event | 加载manifest文件时遇到401或404错误，所以缓存将被删除。 | 最后的事件. |
| error | Event | 加载manifest文件时遇到401或404错误，将中断缓存网页。 | 最后的事件. |
| manifest文件无改动，但这个manifest文件无法下载。 | |||
| 读取资源时遇到致命的错误 | |||
| 正在更新时manifest被修改了 | 客户端将会重新加载文件 |
ok,直接看示例：[离线应用示例2]
支持浏览器：Firefox 3.0, Safari 4.0, Chrome 5.0, Opera 10.6
五、地理定位（Geolocation）
地理定位（Geolocation）是一个可以获取到客户端经纬度等地理位置信息的API。
API本身是不知道客户端地理信息的，常见的地理位置信息来源有全球定位系统(GPS)和从网络信号中推断出的地理信息（如IP地址, RFID, WIFI, 蓝牙MAC地址, GSM/CDMA手机id,以及用户输入的信息 ）
先来了解下Geolocation API：
//返回地理定位对象 var geo = navigator.geolocation; /* *方法,获取当前客户端地理位置 *有三个参数可以用 *successCallback：必需,函数,获取成功后的回调函数 *errorCallback：可选,函数,失败时的回调函数 *options：可选,对象字面量,有三个值可设定： * enableHighAccuracy：是否启用高精度设备（高精度设备包含但不局限于前面所提到的 GPS 和 WIFI） * maximumAge：数值,如果将其定义为负数或者未定义，会重设为0 * timeout：数值,请求获取地理信息时的超时时间，如果将其定义为负数会重设为0，如果未定义则不启用超时判断 */ geo.getCurrentPosition(successCallback,errorCallback,options); /* *方法,持续监控当前客户端地理位置（实时） *返回该watchPosition的id *参数同getCurrentPosition */ var watchGEO = geo.watchPosition(successCallback,errorCallback,options); /*方法,结束指定ID的watchPosition*/ geo.clearWatch(watchId);
使用地理定位API需要获得用户的许可，如果没有，会执行errorCallback；
watchPosition的successCallback只有在获取到的实时地理位置和之前有较大不同时才会执行；
getCurrentPosition和watchPosition的successCallback都有一个position参数，它包含有详细的地理信息如经纬度：
geo.getCurrentPosition(function (pos) {//成功获取时执行 var coord = pos.coords, //坐标detail accuracy = coord.accuracy, //精准度，单位为米 latitude = coord.latitude, //纬度 longitude = coord.longitude, //经度 altitudeAccuracy = coord.altitudeAccuracy, //高度精确度，单位为米 heading = coord.heading, //移动的方向 speed = coord.speed; //速度 showLocationInfo(coord,'map'); //显示坐标信息 showMap(coord,'map'); //显示google地图 },function (error) {//获取失败时执行 alert('error:'+error.message+'\n\n无法获得您的地理位置：'); });
取到经纬度就可以利用各map服务商的app来显示地图，如google map
参见：[地理定位示例]
