本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、课程设计和辅导 4、单片机开发 5、串口通讯调试
 当前位置:文章中心 >> Css3.0_css2.0_html5
立即购买视频教程 对于移动设备来说离线存储简直就是一个神迹
夜鹰教程网 来源:www.yyjcw.com 日期:2017-11-20 14:14:39
对于移动设备来说离线存储简直就是一个神迹

这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



html5带给我们的不仅仅是更多语义丰富的标签,还有更多更牛逼的特性,比如“离线存储”。 对于台式电脑来说,或者它并没有带来什么惊喜,但是对于移动设备来说离线存储简直就是一个神迹。对于任何拥有支持离线存储浏览器的移动设备,比如iphone,ipod touch,离线存储使得web前端工程师可以很容易的针对它们开发应用程序。


前面吹嘘了一段,不过说实在的,html5本地存储就目前来说还是很受限的。其一,浏览器限制,目前只有 Safari 3.1 and later, and in iPhone OS 2.0 and later. 提供了javascript database 原生支持,不过也有 Taffy DB 可以曲线救国。(还没有用过,不敢妄下结论。)。 其二,服务器端需要修改配置,旦如果是自己的服务器就很简单了。


下面就以一个简单的offline web app-note book 为例,记录一下为iphone/ipod touch开发web app的过程。不是经验,只是初探。


首先,适合iphone/ipod touch 的UI 它并不是本文的重点,有兴趣的同学可以移步这里 。这里只强调一点:你默认做的页面,放到iphone看会变的很窄,字很小。这是因为iphone用它320px宽的屏幕显示了一个默认980px宽的页面,你的内容被按比例缩小了。要解决这个问题很简单,只要在html的head区域加一个meta标记,具体语法请看这里 。 也就是这样:


viewport


这个问题解决之后我们就可以肆意的使用html5和css3来打造界面了,(针对设备开发可以不考虑兼容性,真是畅快淋漓呀。)


我大概做了个丑陋的界面:


app UI


html代码, CSS代码 (其实你可以不用看,最后有打包的代码)


完成了UI,我们就需要对数据进行处理了。


在开始“数据”的本地存储之前,我们先来了解一下client-side database storage API:


the client-side database storage API allows web applications to store structured data locally using a medium many web developers are already familiar with – SQL.--webkit blog


目前只有webkit核心的浏览器支持这一特性。你甚至都不能在w3c的html5工作草案中找到 (cs-db)client-side database 的详细描述。


首先我们要尝试建立一个数据库链接:


try { if(!window.openDatabase){ //检测浏览器是否支持cs-db alert('not supported cs-db!'); } else { var shortName = 'noteDB'; var version = '1.0'; var displayName = 'Note book database'; var maxSize = 65536; //创建一个数据库 var db = openDatabase(shortName,version,displayName,maxSize); } } catch(e){ //尝试捕获错误 if (e == 2){ alert('Invalid database version.'); } else { alert("Unknown error "+e+"."); } }

如果以上代码无误,你就会在safair或者chrome的开发者工具中看到这个数据库:


创建的数据库


在右侧区域可以直接执行一些sql查询,但是我总是得到 “发生意外错误“0”。” 这样的结果,不知道是不是RP的问题。


接下来就是创建表,以及执行一些sql语句进行增删改查。


js执行sql的基本语法大致是这样的:


db.transaction( function (transaction){ transaction.executeSql(sqlquery,[],dataHandler, errorHandler); } );

其中transaction.executeSql中参数依次为:sql查询字符串,传递给sql查询的参数,数据处理句柄,错误处理句柄。其中只有第一项为必选,其余都为可选项。


第二个参数的用法大致是这样的:


transaction.executeSql("UPDATE people set age=? where name=?;",[ age, name ]);

查询字符串中的“ ?” 会被后面数组中的变量依次替换。


注意:以上我用了“大致”这个词,因为没有官方的文档 (W3C-web database),只是从一些其它文献以及自己判断得来,若有错误还请指正。


下面我们创建一张用来存储note的表:


db.transaction( function (transaction){ transaction.executeSql( 'CREATE TABLE IF NOT EXISTS notes (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,titel TEXT, note TEXT NOT NULL, date DATE);',errorHandler); } );

errorHandler是这样的:


function errorHandler(transaction, error){ alert('Error was: '+ error.message +'(Code:'+ error.code +')'); var fatal_error = true; if(fatal_error){ return true; } return false; }

error.message 是一段错误描述,error.code 是错误代码 (详情)


再看看如果从db中检索出数据并显示到页面上:


db.transaction( function (transaction){ transaction.executeSql("SELECT * from notes;",[],dataHandler, errorHandler); } ); function dataHandler(transaction, results){ var string = ""; for (var i = 0; i" + row['titel'] + " "; } var listConts = $('listCont'); listConts.innerHTML = string; }

可以看出,基本上和php之类后端语言操作大同小异。

更多代码可查看示例程序,不再一一罗列。


完成了数据的本地存储,就要将文件存储也搞定。为了实现文件的本地存储,html5搞了一个叫 manifest 的文件,这个文件就是一个缓存清单,把需要缓存在客户端的文件告诉浏览器。manifest是一个mimetype为 text/cache-manifest 的 纯文本文件。注意,这点很重要。


下面是一个manifest文件的例子:


manifest


NETWORK, CACHE, FALLBACK 都是可选的。


manifest文件必须以 CACHE MANIFEST 开头


其后需要下载并缓存的文件使用相对或绝对路径皆可,每个资源一行。


NETWORK段表明一些在线资源所在的域,所有这个域下的资源都不会被缓存,即使客户端处于离线状态,也会尝试去请求基于这些域的资源。


CACHE段还不是很明白


FALLBACK段下面每行都包含两部分内容,用空格分隔。后半部分是当前半部分路径不能访问时的备选路径(很拗),如上图就是,如果demoimages目录不能访问时,尝试访问images目录。


manifest文件介绍就到这里,下面创建我们自己的manifest文件


我们只需要缓存两个文件即可,nbStyle.css 和 nbScript.js。还有index.html 本身,由于manifest文件会默认缓存引用自己的文件,所以index.html 不能在缓存列表中写出来: CACHE MANIFEST# version: 2010-01-20 22:3

我们只需要缓存两个文件即可,nbStyle.css 和 nbScript.js。还有index.html 本身,由于manifest文件会默认缓存引用自己的文件,所以index.html 不能在缓存列表中写出来:


CACHE MANIFEST # version: 2010-01-20 22:30 nbStyle.css nbScript.js

就是这么简单了,我们将他保存为 notebook.manifest 文件,并和其它文件一起放在根目录。


最后一个问题,如果将notebook.manifest的mimetype标识为 text/cache-manifest 类型呢?我知道有两种方法:


1. 在站点根目录建立 .htaccess 文件,在其中声明.manifest 的mimetype ,这个需要修改下服务器的配置文件,我没有尝试成功。


2. php环境在apache目录寻找一个为 “mime.types” 的配置文件,在其最后添加一行:


text/cache-manifest manifest

然后在index.html文件引用它:


搞定了这些东西,你就可以尝试用webkit访问你的应用,然后离线,再尝试使用它,程序应该也可以照常运行。


至此,html5的离线存储基本介绍完了,下面附上打包的代码,代码本身没有什么难度,只是我写的太烂了:


代码下载


其实还远没有完,缓存下来的文件如果被更新了怎么办呢?如何通知客户端更新缓存其实也有api,慢慢的再探索吧。非常期待与大家探讨html5相关的问题。




复制链接 网友评论 收藏本文 关闭此页
上一条: HTML5 声明兼容IE的写法  下一条: 拖放API中源对象与目标对象事件间的数据…
夜鹰教程网成立于2008年,目前已经运营了将近 13 年,发布了大量关于 html5/css3/C#/asp.net/java/python/nodejs/mongodb/sql server/android/javascript/mysql/mvc/easyui/vue/echarts原创教程。 我们一直都在坚持的是:认证负责、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心。我们默默投入的时间,确保每一套教程都是一件作品,而不是呆板的文字和视频! 目前我们推出在线辅导班试运营,模式为一对一辅导,教学工具为QQ。我们的辅导学科包括 java 、android原生开发、webapp开发、商城开发、C#和asp.net开发,winform和物联网开发、web前端开发,但不仅限于此。 普通班针对的是国内学员,例如想打好基础的大学生、想转行的有志青年、想深入学习的程序员、想开发软件的初学者或者业余爱好者等。 就业办针对即将毕业上岗的大四学生,或者打算转行的初级开发工程师。 留学生班针对的是在欧美、加拿大、澳洲、日本、韩国、新加坡等地留学的中国学子,目的是让大家熟练地掌握编程技能,按时完成老师布置的作业,并能顺利地通过考试。 详细咨询QQ:1416759661   夜鹰教程网  基于角色的权限管理系统(c-s/b-s)。
  夜鹰教程网  基于nodejs的聊天室开发视频教程
  夜鹰教程网  Git分布式版本管理视频教程
  夜鹰教程网  MVC+EasyUI视频教程
  夜鹰教程网  在线考试系统视频教程
  夜鹰教程网  MongoDB视频教程。
  夜鹰教程网 Canvas视频教程
  夜鹰教程网 报表开发视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  
  热点推荐
什么是css框架
meta标签实现页面的动感效果
CSS半透明滤镜在FIREFOX和IE下面的…
div+css鼠标悬停在div上,div背景色…
纯css下拉菜单特效
div+css的浏览器兼容问题
CSS定义表格线为单一线
CSS滤镜效果收集(全)
列表显示文字和图片垂直居中对齐
在固定位置显示背景图片
网站变换图片的显示方法
在select外面套一个div或span, se…
常用的CSS命名规则
闪字闪字闪字闪字闪字闪字闪字闪字…
css让图片自动适应表格大小
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
HTTP协议实现文件断点续传
H5实现断点上传
行内元素和块级元素汇总
H5视频直播技术介绍
border-image详解
你必须知道的HTML5的新特性
html5 js控制音乐播放
HTML+CSS代码规范
css3学习笔记 transition与animat…
css3学习笔记Transform
css3学习笔记2D或3D转换
css3学习笔记文本特效
css3学习笔记颜色和透明度
css3学习笔记二
css3学习笔记一
  工具下载  需要远程协助? 

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
微信小程序 vue.js高级实例视频教程

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程云课堂 全套前端开发工程师培训课程

微信号:yyjcw10000 QQ:1416759661  远程协助需要加QQ!

业务范围:视频教程|程序开发|在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术范围:全端开发/前端开发/webapp/web服务/接口开发/单片机/C#/java/node/sql server/mysql/mongodb/android/。 



关于我们 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3