HTML5本地存储——Web SQL Database

之前给大家介绍过h5的本地存储Local Storage和Session Storage,这两个是以一个键值来进行存储。存储少量而不复杂的数据是非常有用的,但是对应结构比较复杂的数据,就有点困难了。所以今天就给大家介绍一下为了解决这个问题出现的Web SQL Database.

Web SQL Database

中文翻译作“本地数据库”,是随着HTML5规范加入的在浏览器端运行的轻量级数据库。

三个核心方法

Web SQL Database 规范中定义的三个核心方法:

openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象

transaction:这个方法允许我们根据情况控制事务提交或回滚

executeSql:这个方法用于执行SQL 查询

创建数据库:

以上对应参数为:

  1. mydb:数据库
  2. 1.0:数据库版本号
  3. Test DB:文字说明
  4. 2*1024*1024:数据库大小
  5. 回调(非必须参数)

使用executeSql查询创建数据表:

上述查询将在’mydb’数据库中创建一个名为LOGS的表。

要在表中创建内容,我们在上面的例子中添加简单的SQL查询,如下所示:

我们还可以在创建时传递动态值,如下所示:

这里d_id和d_log是外部变量,executeSql将数组参数中的每个项映射到”?”,如d_id=1,d_log=2那么最终的查询如下:

查询操作:

要读取现有的记录,我们使用回调来捕获结果如下:

最终的demo:

所以最后,让我们将这个例子保持在完整的HTML5文档中,如下所示:

结果如下:

兼容性如下:

QQ图片20171016095841