HTML5 地理位置和本地存储

获取地理位置信息和本地存储是HTML5的两大新特性，本文就这两个特性进行讲解，最后整合出一个完整的DEMO。DEMO的页面使用Google map，可以定位当前用户的位置，也可以自定义查询城市，并可以将当前用户的地理坐标保存在Sqllite数据库中。

最终效果图如下图所示：



地理位置信息

如果你的浏览器支持地理位置信息获取，如果首次在浏览器中访问具有地理位置信息的页面，浏览器会提示是否开启地理位置功能。 Chrome浏览器如下所示：



点击“允许”按钮就可以开始你的地理位置定位之旅了。

在HTML5中获取当前地理位置信息使用如下代码段：

navigator.geolocation.getCurrentPosition(onSuccess,onError,option);

前两个参数是获取当前位置的回调方法，第一个是成功后调用的方法，第二个是失败时调用的方法。这两个方法分别有一个参数， 对应成功和失败的数据。

function onSuccess(position) {
//纬度
var latitude = position.coords.latitude;
//经度
var longitude = position.coords.longitude;
}
function onError(error) {
switch (error.code){
case 1:alert("位置服务被拒绝");break;
case 2:alert("暂时获取不到位置信息");break;
case 3:alert("获取信息超时");break;
default:alert("未知错误");
}
}

建议大家在学习HTML5之前先将javascript的基础知识复习一遍，因为HTML5的新特性都是使用javascript来实现的。

本地数据操作

HTML5中数据存储方式有localStorage，sessionStorage和sqllite，localStorage类似cookie，是以“key : value”的方式存储数据，但存储的数据量比cookie大很多，浏览器关闭后，这些数据依然存在。

sessionStorage和session比较相似，不同的是后者是服务器端状态信息的存储，而前者则是在客户端存储，目的都是保存连接的状态，使用sessionStorage可以减轻服务器端的压力。相同的是两者在浏览器关闭后数据都会清除。

Sqllite则是目前最流行的轻量级数据库之一，被用在嵌入式设备中，如Android，Iphone都支持该数据库。使用如下代码创建数据库：

var db = openDatabase("loc","1.0","local data",2 * 1024 * 1024);

第一个参数是数据库名，第二个参数是版本号，第三个参数是数据库描述信息，第四个参数是数据库的容量。现在就可以对数据库db做操作了。 在做数据库处理时，常用到事物处理。Sqllite也支持该特性,使用如下代码进行事物处理。

db.transaction(function(tx) {
//do something
});

参数tx就是事物处理对象，使用该对象对数据库进行操作：

tx.executeSql("select * from loc where username = ?)",args,onResult,onError);

该语句有四个参数，第一个是Sql语句，第二个是参数列表，第三个是操作成功回调函数，第四个是操作失败回调函数。如下示例：

tx.executeSql("select * from loc where username = ?)",
["jacky"],
function(tx,re) {
//success
},
function(tx,error) {
//error
}
);

失败回调参数中有8种错误码，开发人员可以根据错误码进行相应的处理。

UNKNOWN_ERR: 0
DATABASE_ERR: 1
VERSION_ERR: 2
TOO_LARGE_ERR: 3
QUOTA_ERR: 4
SYNTAX_ERR: 5
CONSTRAINT_ERR: 6
TIMEOUT_ERR: 7

以上就是对HTML5中获取地理位置信息和本地存储特性的介绍。

DEMO下载地址：http://code.google.com/p/ihello-html5/