登录模块加载中...
会员投稿 投稿指南 今天是:
打印本页 | 关闭窗口 | 双击滚屏 您的位置首页>>网页制作学习园地>>HTML教程>>其它文章>>开发web app初探:HTML5本地存储
开发web app初探:HTML5本地存储
来源:前端观察 ‖ 作者: ‖ 点击: ‖ 时间:11-01-06 09:36:02 ‖ 【 】‖ 我要投稿

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的过程。不是经验,只是初探。

  1. 建立适合 iphone/ipod touch 的UI
  2. 数据的本地存储
  3. 文件的本地存储
  4. 完善这个app (不打算完善它了,有时间做一个实用的app专门介绍 iphone 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
|<< << < 1 2 > >> >>|
加入收藏:  加入收藏夹  | 发送给好友:  发送给好友
责任编辑:admin
  • 上一篇:html特效代码合集
  • 下一篇:无
  • 相关文章列表
    请文明参与讨论,禁止漫骂攻击。  
    网友评论