HTML5基础扩展——地理位置、本地存储、缓存


          HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的web开发,HTML5是比较火的。因此这几款扩展功能,感觉更多是从手机,平板等角度出发的。

 

         一,地理定位:首先看一下地理位置的定位的几种形式:IP地址,GPS(Global Positioning System ),WifiGSM(Global System for Mobile Communication )/CDMA(Code Division Multiple Access)。一般手机都是通过GPS进行定位的,相对准确。好看一下HTML5如何实现地理位置:

1. 实现基于浏览器(无需后端支持)获取用户的地理位置技术 

2. 精确定位用户的地理位置( 精度最高达10m之内,依赖设备 ) 

3. 持续追踪用户的地理位置(实时位置) 

4. Google Map、或者 Baidu Map 交互呈现位置信息。

 

          HTML5提供Geolocation API, 用于将用户当前地理位置信息共享给信任的站点,这涉及用户的隐私安全问题,所以当一个站点需要获取用户的当前地理位置,浏览器会提示用户是“允许”or “拒绝”。它提供的方法:

1getCurrentPosition   //当前位置

2watchPosition           //监视位置

3clearWatch               //清除监视


看一下参数:

getCurrentPosition(success,error,option)方法最多可以有三个参数:

第一个参数是成功获取位置信息的回调函数,它是方法唯一必须的参数;

第二个参数用于捕获获取位置信息出错的情况,

第三个参数是配置项。


看一个例子吧:

<!DOCTYPE html>
<html>

	<body>
		<p id="demo">点击这个按钮,获得您的位置:</p>
		<button onclick="getLocation()">试一下</button>
		<div id="mapholder"></div>

		<script>
			//获取id为demo的标签
			var x=document.getElementById("demo");
			//getLocation获取位置的函数,单击是调用
			function getLocation()
			  {
			  	//如果浏览器支持
			  if (navigator.geolocation)
			    {
			    //获取当前位置,分别传入了成功和失败的两个函数
			    navigator.geolocation.getCurrentPosition(showPosition,showError);
			    }
			    //如果不支持,则进行提示
			  else{x.innerHTML="Geolocation is not supported by this browser.";}
			  }
			//获取成功,调用的函数showPosition
			function showPosition(position)
			  {
			  	//获取经度和维度
			  var latlon=position.coords.latitude+","+position.coords.longitude;
			   //利用谷歌地图进行显示,当然了也可以通过百度地图
			  var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
			  +latlon+"&zoom=14&size=400x300&sensor=false";
			  document.getElementById("mapholder").innerHTML="<img src=‘"+img_url+"‘ />";
			  }
			//错误调用的函数
			function showError(error)
			  {
			  switch(error.code) 
			    {
			    	//错误1
			    case error.PERMISSION_DENIED:
			      x.innerHTML="User denied the request for Geolocation."
			      break;
			      //地理位置不可用
			    case error.POSITION_UNAVAILABLE:
			      x.innerHTML="Location information is unavailable."
			      break;
			     //超时
			    case error.TIMEOUT:
			      x.innerHTML="The request to get user location timed out."
			      break;
			      //位置错误
			    case error.UNKNOWN_ERROR:
			      x.innerHTML="An unknown error occurred."
			      break;
			    }
			  }
		</script>
	</body>

</html>

          综上为简单的地理定位了解,由于只是学习,了解的比较浅显。更多资料可以网络搜索,非常多的,很容易的帮助我们实现了手机定位的功能开发。

 

          二,独立数据存储:意思就是将数据存放到本地,由于手机流量的问题,这个功能在手机客户端是非常吃香的。这里看一下WEB本地存储和WEB SQLDatabase.

        1,web本地存储是一个windows的属性,包括localStoragesessionStorage,从名字应该很容易的区分二者,前者一直存储在本地,后者只能伴随着session,窗口关闭也就消失。用法基本一样,这里看localStorage:


       先看下存取的方法:



     好, 看一个例子:


<!DOCTYPE HTML>
<html>

	<body>

		<script type="text/javascript">
			if (localStorage.pagecount) {
				localStorage.pagecount = Number(localStorage.pagecount) + 1;
			} else {
				localStorage.pagecount = 1;
			}
			document.write("Visits: " + localStorage.pagecount + " time(s).");
		</script>

		<p>刷新页面会看到计数器在增长。</p>

		<p>请关闭浏览器窗口,然后再试一次,计数器会继续计数。</p>

	</body>

</html>

        2,WEB SQL Database:Web SQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范。它通过一套API来操纵客户端的数据库。意思就是向浏览器安装了一个数据库,可以像mysqloracle等进行数据的增删改查,只是比localStorage更加功能强大而已。打开浏览器的开发工具,我们可以看到:


      看一个例子:

<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>html5-dataBase</title>
	</head>


	<body>
		<script type="text/javascript">
			//创建数据库
			var db = window.openDatabase("mydata", "1.0", "数据库描述", 20000);
			 //window.openDatabase("数据库名字", "版本","数据库描述",数据库大小);
			if (db)
				alert("新建数据库成功!");

			db.transaction(function(tx) {
				//执行sql语句,创建表
				tx.executeSql("CREATE TABLE test (id int UNIQUE, mytitle TEXT, timestamp REAL)");
			});

			db.transaction(function(tx) {
				//插入数据
				tx.executeSql("INSERT INTO test (mytitle, timestamp) values(?, ?)", ["WEB Database", new Date().getTime()], null, null);
			});

			 //db.transaction(function(tx) {
			 //	tx.executeSql("DROP TABLE qqs");
			 //})

			 //db.transaction(function(tx) {
			 //	tx.executeSql("update test set mytitle=? where mytitle = ‘fsafdsaf‘",[‘xp‘],null,null);
			 //});
			//查询数据库
			db.transaction(function(tx) {
				tx.executeSql("SELECT * FROM test", [],
					function(tx, result) {
						for (var i = 0; i < result.rows.length; i++) {
							document.write(‘<b>‘ + result.rows.item(i)[‘mytitle‘] + ‘</b><br />‘);
						}
					}, function() {
						alert("error");
					});
			});
		</script>
	</body>

</html>

          综上为HTML5对本地存储的一些基本知识。

 

          三,新的网络连接缓存:HTML5通过创建cache manifest 文件,可以轻松地创建 web 应用的离线版本。除了IE,其它浏览器都已经支持。对于手机有非常大的优势,例如我们一次下载好的游戏,可以离线玩,等有网了再进行数据同步等。优势:

离线浏览- 用户可在应用离线时使用它们

速度 -已缓存资源加载得更快

减少服务器负载- 浏览器将只从服务器下载更新过或更改过的资源。

 

         做法也是比较简单,具体没试验,大家可以试试,在manifest文件中添加我们想要缓存的文件名即可。


          好,综上为简单的扩展,我们可以通过网络上资料慢慢深化。当然了这里只是扩展了一部分,HTML5还有很多值得我们学习的地方。需要在不断中慢慢积累。



郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。