HTML5 地理位置和本地存储

最新推荐文章于 2024-09-06 17:17:31 发布

原创最新推荐文章于 2024-09-06 17:17:31 发布 · 1.9k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5 #数据库 #function #浏览器 #存储

HTML5 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了HTML5的两大特性——获取地理位置信息和本地存储，并结合Google Map展示了如何实现定位及数据存储。通过示例代码，演示了如何在用户许可下获取地理位置，以及利用localStorage和SQLite进行数据操作。同时提供了一个DEMO下载链接，帮助读者深入理解这些功能。

获取地理位置信息和本地存储是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/