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

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

localStorage 没有时间限制

sessionStorage 针对一个Session的数据存储

Js代码 收藏代码
  1. <scripttype="text/javascript">
  2. localStorage.lastname="Smith";
  3. document.write(localStorage.lastname);
  4. </script>
  5. <scripttype="text/javascript">
  6. sessionStorage.lastname="Smith";
  7. document.write(sessionStorage.lastname);
  8. </script>

WebStorage的API:

Js代码 收藏代码
  1. //清空storage
  2. localStorage.clear();
  3. //设置一个键值
  4. localStorage.setItem(“yarin”,“yangfegnsheng”);
  5. //获取一个键值
  6. localStorage.getItem(“yarin”);
  7. //获取指定下标的键的名称（如同Array）
  8. localStorage.key(0);
  9. //return“fresh”//删除一个键值
  10. localStorage.removeItem(“yarin”);
  11. 注意一定要在设置中开启哦
  12. setDomStorageEnabled（true）

在Android中进行操作

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

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

Js代码 收藏代码
  1. functioninitDatabase(){
  2. try{
  3. if(!window.openDatabase){
  4. alert('Databasesarenotsupportedbyyourbrowser');
  5. }else{
  6. varshortName='YARINDB';
  7. varversion='1.0';
  8. vardisplayName='yarindb';
  9. varmaxSize=100000;//inbytes
  10. YARINDB=openDatabase(shortName,version,displayName,maxSize);
  11. createTables();
  12. selectAll();
  13. }
  14. }catch(e){
  15. if(e==2){
  16. //Versionmismatch.
  17. console.log("Invaliddatabaseversion.");
  18. }else{
  19. console.log("Unknownerror"+e+".");
  20. }
  21. return;
  22. }
  23. }
  25. functioncreateTables(){
  26. YARINDB.transaction(
  27. function(transaction){
  28. transaction.executeSql('CREATETABLEIFNOTEXISTSyarin(idINTEGERNOTNULLPRIMARYKEY,nameTEXTNOTNULL,descTEXTNOTNULL);',[],nullDataHandler,errorHandler);
  29. }
  30. );
  31. insertData();
  32. }
  34. functioninsertData(){
  35. YARINDB.transaction(
  36. function(transaction){
  37. //Starterdatawhenpageisinitialized
  38. vardata=['1','yarinyang','Iamyarin'];
  40. transaction.executeSql("INSERTINTOyarin(id,name,desc)VALUES(?,?,?)",[data[0],data[1],data[2]]);
  41. }
  42. );
  43. }
  45. functionerrorHandler(transaction,error){
  46. if(error.code==1){
  47. //DBTablealreadyexists
  48. }else{
  49. //Errorisahuman-readablestring.
  50. console.log('Oops.Errorwas'+error.message+'(Code'+error.code+')');
  51. }
  52. returnfalse;
  53. }
  56. functionnullDataHandler(){
  57. console.log("SQLQuerySucceeded");
  58. }
  60. functionselectAll(){
  61. YARINDB.transaction(
  62. function(transaction){
  63. transaction.executeSql("SELECT*FROMyarin;",[],dataSelectHandler,errorHandler);
  64. }
  65. );
  66. }
  68. functiondataSelectHandler(transaction,results){
  69. //Handletheresults
  70. for(vari=0;i<results.rows.length;i++){
  71. varrow=results.rows.item(i);
  72. varnewFeature=newObject();
  73. newFeature.name=row['name'];
  74. newFeature.decs=row['desc'];
  76. document.getElementById("name").innerHTML="name:"+newFeature.name;
  77. document.getElementById("desc").innerHTML="desc:"+newFeature.decs;
  78. }
  79. }
  81. functionupdateData(){
  82. YARINDB.transaction(
  83. function(transaction){
  84. vardata=['fengshengyang','Iamfengsheng'];
  85. transaction.executeSql("UPDATEyarinSETname=?,desc=?WHEREid=1",[data[0],data[1]]);
  86. }
  87. );
  88. selectAll();
  89. }
  91. functionddeleteTables(){
  92. YARINDB.transaction(
  93. function(transaction){
  94. transaction.executeSql("DROPTABLEyarin;",[],nullDataHandler,errorHandler);
  95. }
  96. );
  97. console.log("Table'page_settings'hasbeendropped.");
  98. }
  99. 注意onLoad中的初始化工作
  100. functioninitLocalStorage(){
  101. if(window.localStorage){
  102. textarea.addEventListener("keyup",function(){
  103. window.localStorage["value"]=this.value;
  104. window.localStorage["time"]=newDate().getTime();
  105. },false);
  106. }else{
  107. alert("LocalStoragearenotsupportedinthisbrowser.");
  108. }
  109. }
  111. window.onload=function(){
  112. initDatabase();
  113. initLocalStorage();
  114. }

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

Android中

Java代码 收藏代码
  1. //启用地理定位
  2. webSettings.setGeolocationEnabled(true);
  3. //设置定位的数据库路径
  4. webSettings.setGeolocationDatabasePath(dir);
  6. //配置权限（同样在WebChromeClient中实现）
  7. publicvoidonGeolocationPermissionsShowPrompt(Stringorigin,
  8. GeolocationPermissions.Callbackcallback){
  9. callback.invoke(origin,true,false);
  10. super.onGeolocationPermissionsShowPrompt(origin,callback);
  11. }

在Manifest中添加权限

Xml代码 收藏代码
  1. <uses-permissionandroid:name="android.permission.ACCESS_FINE_LOCATION"/>
  2. <uses-permissionandroid:name="android.permission.ACCESS_COARSE_LOCATION"/>

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

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

Js代码 收藏代码
  1. //获取当前地理位置
  2. navigator.geolocation.getCurrentPosition(success_callback_function,error_callback_function,position_options)
  3. //持续获取地理位置
  4. navigator.geolocation.watchPosition(success_callback_function,error_callback_function,position_options)
  5. //清除持续获取地理位置事件
  6. navigator.geolocation.clearWatch(watch_position_id)

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

在JS中的代码

Js代码 收藏代码
  1. //定位
  2. functionget_location(){
  3. if(navigator.geolocation){
  4. navigator.geolocation.getCurrentPosition(show_map,handle_error,{enableHighAccuracy:false,maximumAge:1000,timeout:15000});
  5. }else{
  6. alert("YourbrowserdoesnotsupportHTML5geoLocation");
  7. }
  8. }
  10. functionshow_map(position){
  11. varlatitude=position.coords.latitude;
  12. varlongitude=position.coords.longitude;
  13. varcity=position.coords.city;
  14. //telnetlocalhost5554
  15. //geofix-82.41162928.054553
  16. //geofix-121.4535646.511194392
  17. //geonmea$GPGGA,001431.092,0118.2653,N,10351.1359,E,0,00,,-19.6,M,4.1,M,,0000*5B
  18. document.getElementById("Latitude").innerHTML="latitude:"+latitude;
  19. document.getElementById("Longitude").innerHTML="longitude:"+longitude;
  20. document.getElementById("City").innerHTML="city:"+city;
  21. }
  23. functionhandle_error(err){
  24. switch(err.code){
  25. case1:
  26. alert("permissiondenied");
  27. break;
  28. case2:
  29. alert("thenetworkisdownorthepositionsatellitescan'tbecontacted");
  30. break;
  31. case3:
  32. alert("timeout");
  33. break;
  34. default:
  35. alert("unknownerror");
  36. break;
  37. }
  38. }

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

● 构建HTML5离线应用

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

例如

Manifest代码 收藏代码
  1. CACHEMANIFEST
  2. #这是注释
  3. images/sound-icon.png
  4. images/background.png
  5. clock.html
  6. clock.css
  7. clock.js
  9. NETWORK:
  10. test.cgi
  12. CACHE:
  13. style/default.css
  15. FALLBACK:
  16. /files/projects/projects

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

HTML5离线应用更新缓存机制

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

自动更新：

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

手动更新：

使用window.applicationCache

Js代码 收藏代码
  1. if(window.applicationCache.status==window.applicationCache.UPDATEREADY)｛
  2. window.applicationCache.update();
  3. ｝

在线状态检测

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

在Android中构建离线应用

Java代码 收藏代码
  1. //开启应用程序缓存
  2. webSettingssetAppCacheEnabled(true);
  3. Stringdir=this.getApplicationContext().getDir("cache",Context.MODE_PRIVATE).getPath();
  4. //设置应用缓存的路径
  5. webSettings.setAppCachePath(dir);
  6. //设置缓存的模式
  7. webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);
  8. //设置应用缓存的最大尺寸
  9. webSettings.setAppCacheMaxSize(1024*1024*8);
  11. //扩充缓存的容量
  12. publicvoidonReachedMaxAppCacheSize(longspaceNeeded,
  13. longtotalUsedQuota,WebStorage.QuotaUpdaterquotaUpdater){
  14. quotaUpdater.updateQuota(spaceNeeded*2);
  15. }


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

更多相关文章

  1. Android缓存的一个Demo
  2. Android异步加载图片，并缓存到SD卡
  3. Android 代码质量工具集成与应用
  4. adb命令执行java代码
  5. 完美解决Android Studio在写XML布局的时候没有了控件代码提示的
  6. Android 代码混淆 防止反编译

随机推荐

  1. android获得系统GPU参数 gl.glGetString
  2. Android之Handler的postDelayed()方法的
  3. Android(安卓)OpenGL10 基本图形绘制
  4. 处理Android Studio编译出现com.android.
  5. android:installLocation这个属性
  6. Android 注解指南
  7. Android控件重叠显示小记
  8. Android 9 安装更新 apk，适用于android 9
  9. [Android]AndroidDesign中ActionBar探究2
  10. android开发中listview 单选多选