在Android中使用HTML5本地存储，地理位置，离线应用

● HTML5本地存储在Android中的应用

HTML5提供了2种客户端存储数据新方法：

localStorage 没有时间限制

sessionStorage 针对一个Session的数据存储

Js代码

<scripttype="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
<scripttype="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

WebStorage的API:

Js代码

//清空storage
localStorage.clear();
//设置一个键值
localStorage.setItem(“yarin”,“yangfegnsheng”);
//获取一个键值
localStorage.getItem(“yarin”);
//获取指定下标的键的名称（如同Array）
localStorage.key(0);
//return“fresh”//删除一个键值
localStorage.removeItem(“yarin”);
注意一定要在设置中开启哦
setDomStorageEnabled（true）

在Android中进行操作

Java代码

//启用数据库
webSettings.setDatabaseEnabled(true);
Stringdir=this.getApplicationContext().getDir("database",Context.MODE_PRIVATE).getPath();
//设置数据库路径
webSettings.setDatabasePath(dir);
//使用localStorage则必须打开
webSettings.setDomStorageEnabled(true);
//扩充数据库的容量（在WebChromeClinet中实现）
publicvoidonExceededDatabaseQuota(Stringurl,StringdatabaseIdentifier,longcurrentQuota,
longestimatedSize,longtotalUsedQuota,WebStorage.QuotaUpdaterquotaUpdater){
quotaUpdater.updateQuota(estimatedSize*2);
}

在JS中按常规进行数据库操作

Js代码

functioninitDatabase(){
try{
if(!window.openDatabase){
alert('Databasesarenotsupportedbyyourbrowser');
}else{
varshortName='YARINDB';
varversion='1.0';
vardisplayName='yarindb';
varmaxSize=100000;//inbytes
YARINDB=openDatabase(shortName,version,displayName,maxSize);
createTables();
selectAll();
}
}catch(e){
if(e==2){
//Versionmismatch.
console.log("Invaliddatabaseversion.");
}else{
console.log("Unknownerror"+e+".");
}
return;
}
}
functioncreateTables(){
YARINDB.transaction(
function(transaction){
transaction.executeSql('CREATETABLEIFNOTEXISTSyarin(idINTEGERNOTNULLPRIMARYKEY,nameTEXTNOTNULL,descTEXTNOTNULL);',[],nullDataHandler,errorHandler);
}
);
insertData();
}
functioninsertData(){
YARINDB.transaction(
function(transaction){
//Starterdatawhenpageisinitialized
vardata=['1','yarinyang','Iamyarin'];
transaction.executeSql("INSERTINTOyarin(id,name,desc)VALUES(?,?,?)",[data[0],data[1],data[2]]);
}
);
}
functionerrorHandler(transaction,error){
if(error.code==1){
//DBTablealreadyexists
}else{
//Errorisahuman-readablestring.
console.log('Oops.Errorwas'+error.message+'(Code'+error.code+')');
}
returnfalse;
}
functionnullDataHandler(){
console.log("SQLQuerySucceeded");
}
functionselectAll(){
YARINDB.transaction(
function(transaction){
transaction.executeSql("SELECT*FROMyarin;",[],dataSelectHandler,errorHandler);
}
);
}
functiondataSelectHandler(transaction,results){
//Handletheresults
for(vari=0;i<results.rows.length;i++){
varrow=results.rows.item(i);
varnewFeature=newObject();
newFeature.name=row['name'];
newFeature.decs=row['desc'];
document.getElementById("name").innerHTML="name:"+newFeature.name;
document.getElementById("desc").innerHTML="desc:"+newFeature.decs;
}
}
functionupdateData(){
YARINDB.transaction(
function(transaction){
vardata=['fengshengyang','Iamfengsheng'];
transaction.executeSql("UPDATEyarinSETname=?,desc=?WHEREid=1",[data[0],data[1]]);
}
);
selectAll();
}
functionddeleteTables(){
YARINDB.transaction(
function(transaction){
transaction.executeSql("DROPTABLEyarin;",[],nullDataHandler,errorHandler);
}
);
console.log("Table'page_settings'hasbeendropped.");
}
注意onLoad中的初始化工作
functioninitLocalStorage(){
if(window.localStorage){
textarea.addEventListener("keyup",function(){
window.localStorage["value"]=this.value;
window.localStorage["time"]=newDate().getTime();
},false);
}else{
alert("LocalStoragearenotsupportedinthisbrowser.");
}
}
window.onload=function(){
initDatabase();
initLocalStorage();
}

● HTML5地理位置服务在Android中的应用

Android中

Java代码

//启用地理定位
webSettings.setGeolocationEnabled(true);
//设置定位的数据库路径
webSettings.setGeolocationDatabasePath(dir);
//配置权限（同样在WebChromeClient中实现）
publicvoidonGeolocationPermissionsShowPrompt(Stringorigin,
GeolocationPermissions.Callbackcallback){
callback.invoke(origin,true,false);
super.onGeolocationPermissionsShowPrompt(origin,callback);
}

在Manifest中添加权限

Xml代码

<uses-permissionandroid:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permissionandroid:name="android.permission.ACCESS_COARSE_LOCATION"/>

HTML5中通过navigator.geolocation对象获取地理位置信息

常用的navigator.geolocation对象有以下三种方法：

Js代码

//获取当前地理位置
navigator.geolocation.getCurrentPosition(success_callback_function,error_callback_function,position_options)
//持续获取地理位置
navigator.geolocation.watchPosition(success_callback_function,error_callback_function,position_options)
//清除持续获取地理位置事件
navigator.geolocation.clearWatch(watch_position_id)

其中success_callback_function为成功之后处理的函数，error_callback_function为失败之后返回的处理函数，参数position_options是配置项

在JS中的代码

Js代码

//定位
functionget_location(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(show_map,handle_error,{enableHighAccuracy:false,maximumAge:1000,timeout:15000});
}else{
alert("YourbrowserdoesnotsupportHTML5geoLocation");
}
}
functionshow_map(position){
varlatitude=position.coords.latitude;
varlongitude=position.coords.longitude;
varcity=position.coords.city;
//telnetlocalhost5554
//geofix-82.41162928.054553
//geofix-121.4535646.511194392
//geonmea$GPGGA,001431.092,0118.2653,N,10351.1359,E,0,00,,-19.6,M,4.1,M,,0000*5B
document.getElementById("Latitude").innerHTML="latitude:"+latitude;
document.getElementById("Longitude").innerHTML="longitude:"+longitude;
document.getElementById("City").innerHTML="city:"+city;
}
functionhandle_error(err){
switch(err.code){
case1:
alert("permissiondenied");
break;
case2:
alert("thenetworkisdownorthepositionsatellitescan'tbecontacted");
break;
case3:
alert("timeout");
break;
default:
alert("unknownerror");
break;
}
}

其中position对象包含很多数据 error代码及选项可以查看文档

● 构建HTML5离线应用

需要提供一个cache manifest文件，理出所有需要在离线状态下使用的资源

例如

Manifest代码

CACHEMANIFEST
#这是注释
images/sound-icon.png
images/background.png
clock.html
clock.css
clock.js
NETWORK:
test.cgi
CACHE:
style/default.css
FALLBACK:
/files/projects/projects

在html标签中声明<html manifest="clock.manifest">

HTML5离线应用更新缓存机制

分为手动更新和自动更新2种

自动更新：

在cache manifest文件本身发生变化时更新缓存资源文件发生变化不会触发更新

手动更新：

使用window.applicationCache

Js代码

if(window.applicationCache.status==window.applicationCache.UPDATEREADY)｛
window.applicationCache.update();
｝

在线状态检测

HTML5 提供了两种检测是否在线的方式：navigator.online（true/false）和online/offline事件。

在Android中构建离线应用

Java代码

//开启应用程序缓存
webSettingssetAppCacheEnabled(true);
Stringdir=this.getApplicationContext().getDir("cache",Context.MODE_PRIVATE).getPath();
//设置应用缓存的路径
webSettings.setAppCachePath(dir);
//设置缓存的模式
webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
//设置应用缓存的最大尺寸
webSettings.setAppCacheMaxSize(1024*1024*8);
//扩充缓存的容量
publicvoidonReachedMaxAppCacheSize(longspaceNeeded,
longtotalUsedQuota,WebStorage.QuotaUpdaterquotaUpdater){
quotaUpdater.updateQuota(spaceNeeded*2);
}

原文链接： http://johncookie.iteye.com/blog/1182459

● HTML5本地存储在Android中的应用

更多相关文章

随机推荐