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还有很多值得我们学习的地方。需要在不断中慢慢积累。
HTML5基础扩展——地理位置、本地存储、缓存的更多相关文章
- 一起来做chrome扩展《本地存储localStorage》
chrome中的本地存储其实也是用的HTML5中localStorage,唯一区别是chrome扩展有自己的localStorage,它属于这个扩展,而不属于一个域名.得用这一点可以很好的处理扩展自己 ...
- 小强的HTML5移动开发之路(19)——HTML5 Local Storage(本地存储)
来自:http://blog.csdn.net/dawanganban/article/details/18218701 一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedO ...
- HTML5新增核心工具——本地存储
除了Canvas元素外,HMTL5另外一个新增的非常重要的功能是可以在客户端本地存储数据库的Web Storage.本文就介绍下Web Storage以及SQLLite操作. Web Storage分 ...
- HTML5本地存储——IndexedDB(一:基本使用)
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- (转)HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage
原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...
- HTML5本地存储——IndexedDB
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage
如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...
- HTML5本地存储localStorage与sessionStorage
在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...
- HTML5本地存储localStorage与sessionStorage详解
前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...
随机推荐
- JNI之String类型
JNI使用的是改良的UTF-8格式的Strings. 以下文档来自官方: Modified UTF-8 Strings The JNI uses modified UTF-8 strings to r ...
- [原创]SpotLight性能监控工具使用介绍
[原创]SpotLight性能监控工具使用介绍 1 Spotlight工具是什么? SpotLight 是由Quest公司出品的一款第三方性能监控的图形化工具.SpotLight有一些的产品诸如可以 ...
- oracle 树型结构数据的查询
Oracle中start by prior子句用法 connect by 是结构化查询中用到的,其基本语法是: select ... from tablename start with 条件1 con ...
- Yarn使用简介
Yarn是由Facebook.Google.Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 , 它主要是为了弥补 npm 的一些缺陷而出现的.和npm相比,它具有如下特点: 速 ...
- .net core中的高效动态内存管理方案
.net core在新增的System.Buffers中引入了一大堆高效内存管理的类,如span和memory.内存池.本文今天这里介绍一个高效动态内存访问方案. ReadOnlySequenceSe ...
- securecrt中文乱码以及ubuntu设置locale
参考文献 http://wiki.ubuntu.org.cn/%E4%BF%AE%E6%94%B9locale http://www.bootf.com/547.html 强烈建议 ubuntu下面不 ...
- 根据twitter的snowflake算法生成唯一ID
C#版本 /// <summary> /// 根据twitter的snowflake算法生成唯一ID /// snowflake算法 64 位 /// 0---0000000000 000 ...
- VS2015 Offline Help Content is now available in 10 more languages!
https://blogs.msdn.microsoft.com/devcontentloc/2015/10/21/vs2015-offline-help-content-is-now-availab ...
- 前端使用AngularJS的$resource,后端ASP.NET Web API,实现分页、过滤
在上一篇中实现了增删改查,本篇实现分页和过滤. 本系列包括: 1.前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查2.前端使用AngularJS的$re ...
- EXCEL密码破解/破解工作表保护密码
网上有很多这个代码,但很多朋友并不太了解如何运用在此做了一些整理,希望对大家有所帮助! 注:很多时候会因为忘记密码丢失重要EXCEL文件而烦恼,这份代码就能帮你找回,仅仅出之这个初衷,如因为这个代码让 ...