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)方法最多可以有三个参数：

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

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

第三个参数是配置项。

看一个例子吧：

<!DOCTYPE html>
<html><body><p id="demo">点击这个按钮，获得您的位置：</p><button οnclick="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.";}}//获取成功，调用的函数showPositionfunction 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) {//错误1case 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的属性，包括localStorage和sessionStorage,从名字应该很容易的区分二者，前者一直存储在本地，后者只能伴随着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来操纵客户端的数据库。意思就是向浏览器安装了一个数据库，可以像mysql，oracle等进行数据的增删改查，只是比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还有很多值得我们学习的地方。需要在不断中慢慢积累。

HTML5基础扩展——地理位置、本地存储、缓存相关推荐

html5 --- 利用localStorage进行本地存储
首先做一个提交到本地存储的表单及一个用来显示本地localStorage信息的表格-代码如下: <h2> 本地存储用 </h2>标题: <input id="t ...
Html5移动开发之Localstorage（本地存储）
HTML5本地存储Localstorage 自从Html5中出现了本地存储的(LocalStorage)的概念后,很多人都会想这个东西和我们传统web开发中的Cookie有什么特别之处,当然笔者也是其 ...
HTML5 API详解（18）:IndexedDB 本地存储
Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了Local Storage和Session Storage与IndexedDB.Web Storage使用简单 ...
HTML5本地存储——IndexedDB
在HTML5本地存储--Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
HTML5本地存储IndexedDB基础使用
做项目时需要用H5本地存储,感觉还不错下面是一些基础知识和一个完整的实例 HTML5 的一个重要特性是本地数据持久性,它使用户能够在线和离线访问 Web 应用程序.此外,本地数据持久性使移动应用程序 ...
app 缓存html页面,HTML5本地存储VS App缓存离线网站浏览
ylerjen.. 17 AppCache使用清单文件来定义应用程序应该存储哪些文件(您可以缓存文件和资源,如HTML页面,JS脚本,CSS样式,图像......) LocalStorage将存储数据 ...
本地存储和离线缓存的作用和区别
前言前端的存储方式有:localStorage.sessionStorage.cookie.UserData.webSQL.indexeddb.HTML5离线存储等.各个存储方式有各自的优缺点,本文 ...
HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
HTML5本地存储与会话存储
本文翻译自:HTML5 Local storage vs. Session storage 除了非持久性和仅限于当前窗口的范围之外,对本地存储的会话存储有任何好处(性能,数据访问等)吗? #1楼参考 ...

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

HTML5基础扩展——地理位置、本地存储、缓存相关推荐

最新文章

热门文章