HTML5本地存储——Web SQL Database-守望者-AIR技术交流

破晓发表于 2016-7-27 12:12:18

HTML5本地存储——Web SQL Database

在<a href="http://www.cnblogs.com/dolphinX/p/3348469.html" style="text-decoration: none; color: rgb(51, 153, 255);">HTML5 WebStorage</a>介绍了html5本地存储的Local Storage和Session Storage，这两个是以键值对存储的解决方案，存储少量数据结构很有用，但是对于大量结构化数据就无能为力了，灵活大不够强大。<h3 style="list-style-type: none; list-style-image: none; font-size: 16px; font-family: Tahoma, Arial, Helvetica, sans-serif;">Web SQL Database</h3>我们经常在数据库中处理大量结构化数据，html5引入Web SQL Database概念，它使用 SQL 来操纵客户端数据库的 API，这些 API 是异步的，规范中使用的方言是SQLlite，悲剧正是产生于此，<a href="http://dev.w3.org/html5/webdatabase/" style="text-decoration: none; color: rgb(51, 153, 255);">Web SQL Database规范页面</a>有着这样的声明<a href="http://images.cnitblog.com/blog/349217/201311/03195047-034221fd6b77423aa92966d6ca38d5f5.png" style="text-decoration: none; color: rgb(51, 153, 255);"><img title="image" src="http://images.cnitblog.com/blog/349217/201311/03195049-5925494098d0455dbee0802dd4163267.png" alt="image" width="545" height="173" border="0" style="border-width: 0px; margin-top: 20px; margin-bottom: 20px; max-width: 650px; display: inline;"></a>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. 大概意思就是这个文档曾经在W3C推荐规范上，但规范工作已经停止了。目前已经陷入了一个僵局：目前的所有实现都是基于同一个SQL后端（SQLite），但是我们需要更多的独立实现来完成标准化。也就是说这是一个废弃的标准了，虽然部分浏览器已经实现，但。。。。。。。<h3 style="list-style-type: none; list-style-image: none; font-size: 16px; font-family: Tahoma, Arial, Helvetica, sans-serif;">三个核心方法</h3>但是我们学一下也没什么坏处，而且能和现在W3C力推的IndexedDB做比较，看看为什么要废弃这种方案。Web SQL Database 规范中定义的三个核心方法：<ol style="margin-left: 20px; padding-left: 40px; list-style: none; font-family: Tahoma, Arial, Helvetica, sans-serif; line-height: 25.2px;"><li style="margin-left: 0px; list-style-image: none;">openDatabase：这个方法使用现有数据库或新建数据库来创建数据库对象</li><li style="margin-left: 0px; list-style-image: none;">transaction：这个方法允许我们根据情况控制事务提交或回滚</li><li style="margin-left: 0px; list-style-image: none;">executeSql：这个方法用于执行SQL 查询</li></ol> <h3 style="list-style-type: none; list-style-image: none; font-size: 16px; font-family: Tahoma, Arial, Helvetica, sans-serif;">openDatabase</h3>我们可以使用这样简单的一条语句，创建或打开一个本地的数据库对象<div class="cnblogs_code" style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin-top: 5px; margin-bottom: 5px; color: rgb(0, 0, 0); font-family: "Courier New" !important; font-size: 12px !important; background-color: rgb(245, 245, 245);"><pre style="white-space: pre-wrap; list-style-type: none; list-style-image: none; font-family: "Courier New" !important;">var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);</pre></div>openDatabase接收五个参数：<ol style="margin-left: 20px; padding-left: 40px; list-style: none; font-family: Tahoma, Arial, Helvetica, sans-serif; line-height: 25.2px;"><li style="margin-left: 0px; list-style-image: none;">数据库名字</li><li style="margin-left: 0px; list-style-image: none;">数据库版本号</li><li style="margin-left: 0px; list-style-image: none;">显示名字</li><li style="margin-left: 0px; list-style-image: none;">数据库保存数据的大小（以字节为单位 )</li><li style="margin-left: 0px; list-style-image: none;">回调函数（非必须)</li></ol> 如果提供了回调函数，回调函数用以调用 changeVersion() 函数，不管给定什么样的版本号，回调函数将把数据库的版本号设置为空。如果没有提供回调函数，则以给定的版本号创建数据库。<h3 style="list-style-type: none; list-style-image: none; font-size: 16px; font-family: Tahoma, Arial, Helvetica, sans-serif;">transaction</h3>transaction方法用以处理事务，当一条语句执行失败的时候，整个事务回滚。方法有三个参数<ol style="margin-left: 20px; padding-left: 40px; list-style: none; font-family: Tahoma, Arial, Helvetica, sans-serif; line-height: 25.2px;"><li style="margin-left: 0px; list-style-image: none;">包含事务内容的一个方法</li><li style="margin-left: 0px; list-style-image: none;">执行成功回调函数（可选）</li><li style="margin-left: 0px; list-style-image: none;">执行失败回调函数（可选）</li></ol> <div class="cnblogs_code" style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin-top: 5px; margin-bottom: 5px; color: rgb(0, 0, 0); font-family: "Courier New" !important; font-size: 12px !important; background-color: rgb(245, 245, 245);"><div class="cnblogs_code_toolbar"><a title="复制代码" style="color: rgb(51, 153, 255); border: none !important;"><img src="http://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="float: left; max-width: 650px;"></a></div><pre style="white-space: pre-wrap; list-style-type: none; list-style-image: none; font-family: "Courier New" !important;">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")');
 });</pre><div class="cnblogs_code_toolbar"><a title="复制代码" style="color: rgb(51, 153, 255); border: none !important;"><img src="http://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="float: left; max-width: 650px;"></a></div></div>这个例子中我们创建了一个table，并在表中插入三条数据，四条执行语句任何一条出现错误，整个事务都会回滚<h3 style="list-style-type: none; list-style-image: none; font-size: 16px; font-family: Tahoma, Arial, Helvetica, sans-serif;">executeSql</h3>executeSql方法用以执行SQL语句，返回结果，方法有四个参数<ol style="margin-left: 20px; padding-left: 40px; list-style: none; font-family: Tahoma, Arial, Helvetica, sans-serif; line-height: 25.2px;"><li style="margin-left: 0px; list-style-image: none;">查询字符串</li><li style="margin-left: 0px; list-style-image: none;">用以替换查询字符串中问号的参数</li><li style="margin-left: 0px; list-style-image: none;">执行成功回调函数（可选）</li><li style="margin-left: 0px; list-style-image: none;">执行失败回调函数（可选）</li><li style="margin-left: 0px; list-style-image: none;"></li></ol>在上面的例子中我们使用了插入语句，看个查询的例子<div class="cnblogs_code" style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin-top: 5px; margin-bottom: 5px; color: rgb(0, 0, 0); font-family: "Courier New" !important; font-size: 12px !important; background-color: rgb(245, 245, 245);"><div class="cnblogs_code_toolbar"><a title="复制代码" style="color: rgb(51, 153, 255); border: none !important;"><img src="http://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="float: left; max-width: 650px;"></a></div><pre style="white-space: pre-wrap; list-style-type: none; list-style-image: none; font-family: "Courier New" !important;">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);
 }
 });</pre><div class="cnblogs_code_toolbar"><a title="复制代码" style="color: rgb(51, 153, 255); border: none !important;"><img src="http://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="float: left; max-width: 650px;"></a></div></div><h3 style="list-style-type: none; list-style-image: none; font-size: 16px; font-family: Tahoma, Arial, Helvetica, sans-serif;">完整示例</h3><div class="cnblogs_code" style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin-top: 5px; margin-bottom: 5px; color: rgb(0, 0, 0); font-family: "Courier New" !important; font-size: 12px !important; background-color: rgb(245, 245, 245);"><div class="cnblogs_code_toolbar"><a title="复制代码" style="color: rgb(51, 153, 255); border: none !important;"><img src="http://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="float: left; max-width: 650px;"></a></div><pre style="white-space: pre-wrap; list-style-type: none; list-style-image: none; font-family: "Courier New" !important;"><!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></pre><div class="cnblogs_code_toolbar"><a title="复制代码" style="color: rgb(51, 153, 255); border: none !important;"><img src="http://common.cnblogs.com/images/copycode.gif" alt="复制代码" style="float: left; max-width: 650px;"></a></div></div><h3 style="list-style-type: none; list-style-image: none; font-size: 16px; font-family: Tahoma, Arial, Helvetica, sans-serif;">最后</h3>由于Web SQL Database规范已经被废弃，原因说的很清楚，当前的SQL规范采用SQLite的SQL方言，而作为一个标准，这是不可接受的，每个浏览器都有自己的实现这还搞毛的标准。这样浏览器兼容性就不重要了，估计慢慢会被遗忘。不过Chrome的控制台真心好用啊，神马cookie、Local Storage、Session Storage、Web SQL、IndexedDB、Application Cache等html5新增内容看的一清二楚，免去了很多调试代码工作。<a href="http://images.cnitblog.com/blog/349217/201311/03201954-3d88b394c99d47deaae3126a67e730ac.png" style="text-decoration: none; color: rgb(51, 153, 255);"><img title="image" src="http://images.cnitblog.com/blog/349217/201311/03201955-8a618689641d428e988529a27b6e494c.png" alt="image" width="816" height="411" border="0" style="border-width: 0px; border-style: initial; margin-top: 20px; margin-bottom: 20px; max-width: 650px; display: inline;"></a> 来源：http://www.cnblogs.com/dolphinX/p/3405335.html

页: [1]

守望者--AIR技术交流's Archiver

HTML5本地存储——Web SQL Database