HTML5基础扩展——地理位置、本地存储、缓存
HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的web开发，HTML5是比较火的。因此这几款扩展功能，感觉更多是从手机，平板等角度出发的。
一，地理定位：首先看一下地理位置的定位的几种形式：IP地址，GPS（Global Positioning System ），Wifi，GSM（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 “拒绝”。它提供的方法：
1、getCurrentPosition //当前位置
2、watchPosition //监视位置
3、clearWatch //清除监视
看一下参数：
getCurrentPosition(success,error,option)方法最多可以有三个参数：
第一个参数是成功获取位置信息的回调函数，它是方法唯一必须的参数；
第二个参数用于捕获获取位置信息出错的情况，
第三个参数是配置项。
看一个例子吧：
|
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
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<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;
//利用谷歌地图进行显示，当然了也可以通过百度地图
+latlon+
"&zoom=14&size=400x300&sensor=false"
;
document.getElementById(
"mapholder"
).innerHTML=
"<img src="
"+img_url+"
" style="
display: none;
"><img alt="
加载中...
" title="
图片加载中...
" src="
http:
//www.2cto.com/statics/images/s_nopic.gif">";
}
//错误调用的函数
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>
|
综上为简单的地理定位了解，由于只是学习，了解的比较浅显。更多资料可以网络搜索，非常多的，很容易的帮助我们实现了手机定位的功能开发。
二，独立数据存储：意思就是将数据存放到本地，由于手机流量的问题，这个功能在手机客户端是非常吃香的。这里看一下WEB本地存储和WEB SQLDatabase.
1,web本地存储是一个windows的属性，包括localStorage和sessionStorage,从名字应该很容易的区分二者，前者一直存储在本地，后者只能伴随着session，窗口关闭也就消失。用法基本一样，这里看localStorage:
先看下存取的方法：
好， 看一个例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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>
|
2,WEB SQL Database:Web SQL数据库API实际上不是HTML5规范的组成部分，而是单独的规范。它通过一套API来操纵客户端的数据库。意思就是向浏览器安装了一个数据库，可以像mysql，oracle等进行数据的增删改查，只是比localStorage更加功能强大而已。打开浏览器的开发工具，我们可以看到：
看一个例子:
|
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
43
44
|
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
>
<title>html5-dataBase</title>
<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>
|
综上为HTML5对本地存储的一些基本知识。
三，新的网络连接缓存：HTML5通过创建cache manifest 文件，可以轻松地创建 web 应用的离线版本。除了IE，其它浏览器都已经支持。对于手机有非常大的优势，例如我们一次下载好的游戏，可以离线玩，等有网了再进行数据同步等。优势：
离线浏览- 用户可在应用离线时使用它们
速度 -已缓存资源加载得更快
减少服务器负载- 浏览器将只从服务器下载更新过或更改过的资源。
做法也是比较简单，具体没试验，大家可以试试，在manifest文件中添加我们想要缓存的文件名即可。
好，综上为简单的扩展，我们可以通过网络上资料慢慢深化。当然了这里只是扩展了一部分，HTML5还有很多值得我们学习的地方。需要在不断中慢慢积累。