基于HTML5 的WebSql本地设备数据库
HTML5 的 Web SQL Database 用本地和会话存储实现简单的对象持久化,对繁琐的关系数据进行处理。
在 W3C 的 Web SQL Database 规范中(参照 介绍)有这样的描述:Web SQL Database 引入了一套使用 SQL 来操纵客户端数据库(client-side database)的 API,这些 API 是异步的(asynchronous),所以作者在使用这套 API 时会发现匿名函数非常有用。
Web SQL Database 规范中定义的三个核心方法:
1、openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。
2、transaction:这个方法允许我们根据情况控制事务提交或回滚。
3、executeSql:这个方法用于执行真实的SQL查询
打开数据库
openDatabase方法可以打开已经存在的数据库,不存在则创建:
var db = openDatabase('mydatabase', '1.0', my db', 2 * 1024);
openDatabasek中五个参数分别为:数据库名、版本号、描述、数据库大小、创建回调。创建回调没有也可以创建数据库。
·下面是网上一段很有用的封装的数据库创建方法
function initDB(){ var myDB = null; try { if (!window.openDatabase) { // 当前浏览器没有数据库支持 alert('db not supported'); } else { var shortName = 'testdb'; var version = '1.0'; var displayName = 'test offline database'; var maxSize = 65536; // 字节 myDB = openDatabase(shortName, version, displayName, maxSize); } } catch(e) { // 这里开始异常处理 . if (e == INVALID_STATE_ERR) { // 数据库版本异常 . alert("Invalid database version."); } else { alert("Unknown error "+e+"."); } } // 返回创建好的数据库实例 return myDB; }
执行数据库语句
所有 SQL 语句的执行都被嵌套在一个事务中,从而保证了数据的完整性和一致性。执行该 SQL 语句的结果以及错误处理需要在 executeSql 函数的最后两个参数中指定,这两个回调方法参数是可以省略的。
var sql1 = 'CREATE TABLE IF NOT EXISTS User(name TEXT, age INTEGER);' var sql2 = 'INSERT INTO User values(?,?)'; var sql3 = 'SELECT * FROM User WHERE name=?'; var sql4 = 'DELETE FROM User where name=?'; var sql5 = 'UPDATE User SET age=? WHERE name=?'; myDB.transaction(function (tx) { tx.executeSql(sql,['参数'],function(tx,results){ var len = results.rows.length; var result = results.rows.item(0).name },function(tx,error){ }); });
persistence.js
所有的 SQL 操作都需要在指定的函数中做结果处理以及错误处理,而且传统的 SQL 语句写起来也比较费事,这个时候我们都无比怀念 Java 语言中的 ORM 工具。
所幸的是开发社区从来不缺有创意的开发人员,目前已经有不少的开源 Web SQL ORM 工具出现了。
persistence.js 是一个 JavaScript 框架,最初它的设计目标是对 HTML Web SQL 进行 OR Mapping,以方便客户端开发人员进行快速的 Web SQL 访问。
后来随着该框架的发展,它开始逐渐剥离了对数据库的依赖,成为一个可以支持各种数据库的框架。
(1)引入 persistence.js
persistence.js 将其核心模块分割成各个较小的 JavaScript 文件,有效的保证了高性能的加载,用户仅需要在用到某个功能模块时才引入相应的 JavaScript 文件。这里我们用到了 persistence.js,persistence.store.sql.js 和 persistence.store.websql.js,这三个文件是使用 Web SQL 必需的。如果用户想以在内存中临时保存数据的方式作为浏览器不支持 Web SQL API 时的替代,那么也可以将 persistence.store.memory.js 引入进来。
<script type="text/javascript" src="js/persistence.js"></script>
<script type="text/javascript" src="js/persistence.store.sql.js"></script>
<script type="text/javascript" src="js/persistence.store.websql.js"></script>
<script type="text/javascript" src="js/persistence.store.memory.js"></script>
文件下载地址:https://github.com/coresmart/persistencejs
(2)插入和删除数据
对 User 表插入一条记录就是直接将一个 User 对象保存起来,并调用 flush() 方法在持久化。
persistence.js 插入数据
var mark = new User({name: "Mark", age: 60}); persistence.add(mark); persistence.flush();
删除一条记录就是直接将一个 User 对象删除,如清单 10。
persistence.js 删除数据
persistence.remove(mark); persistence.flush();
(3)对表之间关联的支持
传统的数据库支持一对多,多对一,多对多的表间关联,这部分功能在很多 Java ORM 工具中已经很好的支持了,在 persistence.js 中,也能发现类似的实现。比如上例中的 User 表,我们需要加入一个新的 Address 表记录 User 对象的地址,每个 User 对象可能有多个地址。我们可以轻易实现表的关联。
var Address = persistence.define('Address', { detail: "TEXT", zipcode: "TEXT" }); User.hasMany(“addresses”, Address, “user”); persistence.schemaSync(); var addr1 = new Address({detail:”addr1”, zipcode:”code1”}); var addr2 = new Address({detail:”addr2”, zipcode:”code2”}); persistence.add(addr1); persistence.add(addr2); mark.addresses.add(addr1); mark.addresses.add(addr2); persistence.flush();
hasMany() 方法是每个通过 persistence.define 定义出的对象都有的内置方法,通过执行上述 hasMany() 方法,User 表将会增加一个属性 addresses 作为与 Address 表的关联,并且 addresses 可以关联到多个 Address 对象。而 Address 对象也会 增加一个 user 属性,通过 user 属性将某个 Address 对象关联到一个 User 对象。
类似的,用户也可以调用表对象的 hasOne() 方法来定义 Address 对象仅关联到一个 User 对象。
(4)查询数据
persistence.js 提供了简单而强大的查询语法,查询数据是仅需要相当直观的一两次 API 调用。针对某个表的查询入口实际上就是从 persistence.define 定义出的对象入手。以上文定义的 User 为例。
User.all() 将会直接返回一个 QueryCollection,里面将包含所有的 User 对象。
User.load() 可以根据用户传入的 User 对象 ID 来加载某个 User 对象。
User.findBy() 可以根据用户传入的 User 对象属性以及属性的值来查询出符合条件的 User 对象集合并返回。
User.all().one(function(user){ console.log(user); }); // 查询出第一个 User 对象 User.load("6C22FD66801C41728AE5A6BCE0A8EE54", function(user){ console.log(user.name); }); // 查询出 ID 为"6C22FD66801C41728AE5A6BCE0A8EE54"的 User 对象 User.findBy("name", "Mark", function(user){ console.log(user.age); }); // 查询出 name 是 Mark 的 User 对象
针对查询返回的 QueryCollection,persistence.js 提供了丰富的扩展性功能来整理该集合中的数据,如 filter,or,and,order,limit 等等,感兴趣的读者可以在 persistence.js 的官网上找到相关介绍。
然而!!!
这他喵的就有点尴尬了。
W3C组织在2010年11月18日废弃了webSql。但是并不影响其当前功能的使用,依然很强悍,使用者不在少数。
基于HTML5 的WebSql本地设备数据库的更多相关文章
- 基于HTML5的Web跨设备超声波通信方案
前言:Chirp在iPhone上掀起了有声传输文件的序幕,我们再也不需要彩信.蓝牙配对.IM来传送数据.它通过“叽叽喳喳”的小鸟叫声来分享数据,简单有趣,而且可以快速的实现一对多的分享. 此外支付宝曾 ...
- HTML5本地存储和本地的数据库
一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cooki ...
- 基于Html5的移动端开发框架的研究
下面统计信息部分来自网络,不代表个人观点.请大家参考. 基于Html5移动端开发框架调查 序号 框架 简介 优点 缺 ...
- 基于 HTML5 的数据存储
以前想做个静态网页APP.最初的思路是用本地文件存储数据,后来发现在手机上运行时,文件无法找到. 经过了长达几个月的搜索(实际也就几天),没有找到合适的方法. 就在绝望的时候,无意间搜到基于HTML5 ...
- 基于Html5的移动端APP开发框架
快速增长的APP应用软件市场,以及智能手机的普及,手机应用:Native(原生)APP快速占领了APP市场,成为了APP开发的主流,但其平台的不通用性,开发成本高,多版本开发等问题,一直困扰着专业AP ...
- 基于HTML5的Web SCADA工控移动应用
在电力.油田燃气.供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex.Silverlight甚至Applet这样的重客户端方案,在 ...
- 基于HTML5移动web应用
一.基于HTML5移动web应用 1.canvas 绘图 2.多媒体 3.本地存储 4.离线应用 5.使用地理位置 6.移动web框架 二.具体说明 1.HTML5标准最大的变化就是支持Web绘图 ...
- 快速开发基于 HTML5 网络拓扑图应用
采用 HT 开发网络拓扑图非常容易,例如<入门手册>的第一个小例子麻雀虽小五脏俱全:http://www.hightopo.com/guide/guide/core/beginners/e ...
- 基于HTML5技术的电力3D监控应用(二)
上篇介绍了我们电力项目的基本情况,我们选用HTML5技术还是顶着很大压力,毕竟HTML5技术性能行不行,浏览器兼容性会不会有问题,这些在项目选型阶段还是充满疑惑,项目做到现在终于快收尾了我们才敢松口气 ...
随机推荐
- JAVA的abstract修饰符 && 接口interface用法 && 抽象类和interface的差别
abstract修饰符可以修饰类和方法. (1)abstract修饰类,会使这个类成为一个抽象类,这个类将不能生成对象实例,但可以做为对象变量声明的类型(见后面实例),也就是编译时类型.抽象类就相当于 ...
- Anaconda安装第三方包(whl文件)
先说下环境 Anaconda 对应Python3.5的版本 win7,64位系统. step1:下载whl文件 step2:打开‘Anaconda Command Prompt‘, 如下图: step ...
- Springmvc @CookieValue实用
页面直接请求, Controller代码 @RequestMapping("/testCookieValue") public String testCookieValue(@C ...
- SharePoint Framework (SPFx)安装配置以及开发-基础篇
前言 SharePoint Framework(SPFx),是页面 和Webpart的模型,完全支持本地开发(即完全可以脱离SharPoint环境在本地进行开发),SPFx包含了一系列的client- ...
- 近期unity ios接入的事情
1, 在接入苹果内支付的时候,遇到一个很严重的问题,使用的公司的moni2来测试的,但是在测试的过程中发现每次调用oc的内支付代码后,总会先回调一个支付成功,然后弹出输入密码框,当点击取消后,再一次 ...
- putty连接远程局域网的MySql(不需要单独打开plink)
3316 是本地端口,映射到远程内网的一台MySql主机 10.8.2.172
- 在SQL SERVER中查找用分隔符分隔的数据
SELECT * FROM [DB_SCJC].[dbo].[tn_Manager] 其中, CHARINDEX({1},{2})中,{1}是要查找的字符,{2}是字典库.返回值为{1}在{2}中的位 ...
- visual studio 中将选中代码相同的代码的颜色设置,修改高亮颜色
这是一个很实用的功能,默认的设置里不是很明显,设置完之后效果图如下: 具体设置方法是: 1. 菜单:工具 -> 选项 ->环境 ->字体和颜色 2. 在右边的 "显示 ...
- 关于java集合排序
对于排序,java开发者并不陌生. 为避免以后遗忘,现在再次总结一下! 常见8大排序算法, 平时自己熟悉的只有几种种!冒泡,二分/折半.插入.快排等!现在一一讲解一下,这里只讲思想,暂时不做实现! 一 ...
- hdu5976贪心乘法逆元
hdu 5976 Detachment题目连接 题意: 给定一个自然数x,让你给出一种拆分方式n=a1+a2+...(ai≠aj),使得每个小部分的乘积s=a1*a2*...最大 解题思路: 我们要乘 ...