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基础扩展——地理位置、本地存储、缓存的更多相关文章

  1. 一起来做chrome扩展《本地存储localStorage》

    chrome中的本地存储其实也是用的HTML5中localStorage,唯一区别是chrome扩展有自己的localStorage,它属于这个扩展,而不属于一个域名.得用这一点可以很好的处理扩展自己 ...

  2. 小强的HTML5移动开发之路(19)——HTML5 Local Storage(本地存储)

    来自:http://blog.csdn.net/dawanganban/article/details/18218701 一.浏览器存储的发展历程 本地存储解决方案很多,比如Flash SharedO ...

  3. HTML5新增核心工具——本地存储

    除了Canvas元素外,HMTL5另外一个新增的非常重要的功能是可以在客户端本地存储数据库的Web Storage.本文就介绍下Web Storage以及SQLLite操作. Web Storage分 ...

  4. HTML5本地存储——IndexedDB(一:基本使用)

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  5. (转)HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...

  6. HTML5本地存储——IndexedDB

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  7. 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage

    如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...

  8. HTML5本地存储localStorage与sessionStorage

    在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...

  9. HTML5本地存储localStorage与sessionStorage详解

    前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...

随机推荐

  1. BZOJ.1085.[SCOI2005]骑士精神(迭代加深搜索)

    题目链接 最小步数这类,适合用迭代加深搜索. 用空格走代替骑士. 搜索时记录上一步防止来回走. 不需要每次判断是否都在位置,可以计算出不在对应位置的骑士有多少个.而且每次复原一个骑士至少需要一步. 空 ...

  2. setInterval 和 setTimeout

    setInterval 和 settimeout的区别 setinterval 1.会造成某些间隔会被跳过2.多个定时器之间的执行代码事假间隔比预期的小 而且 当定时器代码添加到任务队列里面没有被执行 ...

  3. java并发基础(五)--- 线程池的使用

    第8章介绍的是线程池的使用,直接进入正题. 一.线程饥饿死锁和饱和策略 1.线程饥饿死锁 在线程池中,如果任务依赖其他任务,那么可能产生死锁.举个极端的例子,在单线程的Executor中,如果一个任务 ...

  4. 【Go命令教程】9. go list

    go list 命令的作用是列出指定的 代码包 的信息.与其他命令相同,我们需要以 代码包导入路径 的方式给定代码包.被给定的代码包可以有多个.这些代码包对应的目录中必须直接保存有 Go 语言源码文件 ...

  5. <table>标签的结构和合并单元格的方法

    1.<table>标签的结构 示例代码:  <table border="1">       <caption>信息统计表</captio ...

  6. Delphi 类的类 class of 用法

    http://blog.csdn.net/blue_morning/article/details/8815609 Delphi 类的类 class of 用法   这个概念本来在一个关于Delphi ...

  7. 在Visual Studio中使用活动图描述业务流程

    当希望描述某个流程的时候,用活动图表示. 在项目中添加一个名称为"Shopping"的文件夹. 把"Orders Model"这个UML类图拖放到Shoppin ...

  8. Android控件之ImageSwticher

    Android控件之ImageSwticher 1. ImageSwticher介绍 ImageSwitcher是图片切换的控件,它能实现图片切换时的动画效果,包括图片导入效果.图片消失效果等等.An ...

  9. C#编程(二十七)----------创建泛型类

    创建泛型类 首先介绍一个一般的,非泛型的简化链表类,可以包含任意类型的对象,以后再把这个类转化为泛型类. 在立案表中,一个元素引用下一个元素.所以必须创建一个类,他将对象封装在链表中,并引用下一个对象 ...

  10. Apache Tomcat 9 Installation on Linux (RHEL and clones)

    Apache Tomcat 9 is not available from the standard RHEL distributions, so this article provides info ...