HTML5本地存储——Web SQL Database

时间 2019-11-29

标签 html5 html 本地存储 web sql database 栏目 HTML5 繁體版

原文原文链接

在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage，这两个是以键值对存储的解决方案，存储少许数据结构颇有用，可是对于大量结构化数据就无能为力了，灵活大不够强大。javascript

Web SQL Database

咱们常常在数据库中处理大量结构化数据，html5引入Web SQL Database概念，它使用 SQL 来操纵客户端数据库的 API，这些 API 是异步的，规范中使用的方言是SQLlite，悲剧正是产生于此，Web SQL Database规范页面有着这样的声明html

This document was on the W3C Recommendation track but specification work has stopped. The specification reached an impasse: all interested implementors have used the same SQL backend (Sqlite), but we need multiple independent implementations to proceed along a standardisation path.html5

大概意思就是java

这个文档曾经在W3C推荐规范上，但规范工做已经中止了。目前已经陷入了一个僵局：目前的全部实现都是基于同一个SQL后端（SQLite），可是咱们须要更多的独立实现来完成标准化。web

也就是说这是一个废弃的标准了，虽然部分浏览器已经实现，但。。。。。。。数据库

三个核心方法

可是咱们学一下也没什么坏处，并且能和如今W3C力推的IndexedDB作比较，看看为何要废弃这种方案。Web SQL Database 规范中定义的三个核心方法：后端

openDatabase：这个方法使用现有数据库或新建数据库来建立数据库对象
transaction：这个方法容许咱们根据状况控制事务提交或回滚
executeSql：这个方法用于执行SQL 查询

openDatabase

咱们可使用这样简单的一条语句，建立或打开一个本地的数据库对象浏览器

var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);

openDatabase接收五个参数：cookie

数据库名字
数据库版本号
显示名字
数据库保存数据的大小（以字节为单位 )
回调函数（非必须)

若是提供了回调函数，回调函数用以调用 changeVersion() 函数，无论给定什么样的版本号，回调函数将把数据库的版本号设置为空。若是没有提供回调函数，则以给定的版本号建立数据库。数据结构

transaction

transaction方法用以处理事务，当一条语句执行失败的时候，整个事务回滚。方法有三个参数

包含事务内容的一个方法
执行成功回调函数（可选）
执行失败回调函数（可选）

db.transaction(function (context) { context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)'); context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")'); context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")'); context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")'); });

这个例子中咱们建立了一个table，并在表中插入三条数据，四条执行语句任何一条出现错误，整个事务都会回滚

executeSql

executeSql方法用以执行SQL语句，返回结果，方法有四个参数

查询字符串
用以替换查询字符串中问号的参数
执行成功回调函数（可选）
执行失败回调函数（可选）

在上面的例子中咱们使用了插入语句，看个查询的例子

db.transaction(function (context) { context.executeSql('SELECT * FROM testTable', [], function (context, results) { var len = results.rows.length, i; console.log('Got '+len+' rows.'); for (i = 0; i < len; i++){ console.log('id: '+results.rows.item(i).id); console.log('name: '+results.rows.item(i).name); } });

完整示例

<!DOCTYPE HTML> <html> <head> <title>Web SQL Database</title> </head> <body> <script type="text/javascript"> var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024); var msg; db.transaction(function (context) { context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)'); context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")'); context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")'); context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")'); }); db.transaction(function (context) { context.executeSql('SELECT * FROM testTable', [], function (context, results) { var len = results.rows.length, i; console.log('Got '+len+' rows.'); for (i = 0; i < len; i++){ console.log('id: '+results.rows.item(i).id); console.log('name: '+results.rows.item(i).name); } }); }); </script> </body> </html>

最后

因为Web SQL Database规范已经被废弃，缘由说的很清楚，当前的SQL规范采用SQLite的SQL方言，而做为一个标准，这是不可接受的，每一个浏览器都有本身的实现这还搞毛的标准。这样浏览器兼容性就不重要了，估计慢慢会被遗忘。不过Chrome的控制台真心好用啊，神马cookie、Local Storage、Session Storage、Web SQL、IndexedDB、Application Cache等html5新增内容看的一清二楚，免去了不少调试代码工做。