之前面试一直有被问到h5新特性,地理定位,web存储,应用缓存种种,都是在书上看到的,现在实习改版webapp,用到geolocation和localStorage,正好做个总结及扩展。

geolocation对象

地理位置API通过navigator.geolocation提供,和其他对象方法一样,使用前先判断

1
2
3
4
5
if(navigator.geolocation){//"geolocation" in navigator
/*地理位置服务可用*/
}else{
...
}

1.获取当前定位getCurrentPosition()

异步请求获取用户位置,查询定位硬件来获取最新消息。

2.监视定位watchPosition()

设定一个回调函数来响应定位数据发生的变更(设备发生了移动,或获取到了更高精度的地理位置信息)。

参数一:当定位被确定后,定义的回调函数就会被执行。
参数二:(可选)有错误时会被执行的回调函数
参数三:(可选)通过该对象参数设定最长可接受的定位返回时间、等待请求的时间和是否获取高精度定位。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var state = false;
function getLocation(isgetLocationOnce){
var watchPositionPointer
,watchOrGetFunName =isgetLocationOnce?'getCurrenPosition':'watchPosition';
if(navaigator.geolocation){
watchPositionPointer = navaigator.geolocation[watchOrGetFunName](geo_success, geo_error, {enableHighAccuracy:true, maximumAge:20000, timeout:13000})
//Full spec for navigator.geolocation:http://dev.w3.org/geo/api/spec-source.html#geolocation_interface
}else{
alert("error")
}
}
function geo_success(geoInfo){
geoInfoLocation = new mapApi.Convertor().toSogou(new mapApi.LatLng(geoInfo.coords.latitude,geoInfo.coords.longitude));
//mapAPi latitude and longitude
callback(function(){//get location
identifie: 'regeocoder',
url: 'http://api.go2map.com/engine/api/regeocoder/json?points=' + geoInfoLocation + '&type=0',
callback: function(data) {
do sth...
});
});
}
function geo_error(error)
{

switch(error.code)
{
case error.TIMEOUT:
alert("timeout!");
break;
};
}
function start(){
if(state){
//If we already have a state which is the ID returned by navigator.geolocation.watchPosition()
navigator.geolocation.clearWatch(wpid);
state=false;
}else {
//start the process
getLocation(isgetLocationOnce);//getCurrenPosition or watchPosition
}
}
start();

写着写着,问题来了,还有什么时候用到navigator对象?

1
2
3
4
5
6
7
8
function getMobileType(){
var t="unknow";
if( navigator.userAgent.match(/Android/i) ) { t = "android" }
if( navigator.userAgent.match(/BlackBerry/i) ) { t = "blackberry" }
if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) { t = "ios" }
if( navigator.userAgent.match(/IEMobile/i) ) { t = "window" }
return t;
}

温故而知新,爽哉!

接下来复习下storage

HTML5 提供了两种在客户端存储数据的新方法

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
之前,这些都是由cookie完成的。但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢而且效率也不高。
在HTML5中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

web storage和cookie的区别

•Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
•除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。