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: 0DATABASE_ERR: 1VERSION_ERR: 2TOO_LARGE_ERR: 3QUOTA_ERR: 4SYNTAX_ERR: 5CONSTRAINT_ERR: 6TIMEOUT_ERR: 7

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

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