HTML5本地存储初探(二)
完成了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+"."); } } |
在右侧区域可以直接执行一些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简介 (阅读:16111)
- HFile存储格式 (阅读:14541)
- 我对技术方向的一些反思 (阅读:9876)
- 淘宝图片存储架构 (阅读:9840)
- 海量小文件存储 (阅读:7560)
- HBase技术介绍 (阅读:6764)
- 存储基础知识之——硬盘接口简述 (阅读:6162)
- 面向移动设备的HTML5开发框架梳理 (阅读:5933)
- JavaScript,只有你想不到 (阅读:5111)
- 在perl中连接和使用sqlite做数据存储 (阅读:5061)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:Robin 来源: Time Machine
- 标签: HTML5 存储
- 发布时间:2010-04-14 13:38:54
- [56] IOS安全–浅谈关于IOS加固的几种方法
- [55] Oracle MTS模式下 进程地址与会话信
- [54] 图书馆的世界纪录
- [54] android 开发入门
- [52] 如何拿下简短的域名
- [51] Go Reflect 性能
- [50] 【社会化设计】自我(self)部分――欢迎区
- [47] 读书笔记-壹百度:百度十年千倍的29条法则
- [37] 程序员技术练级攻略
- [33] 视觉调整-设计师 vs. 逻辑