webSql

在以前做项目的时候，有接触到websql内容。打开谷歌浏览器的调试工具，在Application下方，左侧的工具栏内，可以看到Storage有5项，cookie、localStorage、SessionStorage、WebSQL、IndexedDB。这些都都可以做前端的缓存使用，即，及时页面刷新并重新加载，还能从缓存中读到之前的旧数据。

在这些地方，如果要保存数据，建议保存非敏感型的数据。前端可以用underscope来处理数据，但是可以利用WebSQL提供的功能，使用sql来完成一些计算任务。下面简单的开个头，以后有时间再续。

资源

菜鸟教程

参考文章1

参考文章2

简单的尝试

1、打开数据库。

var db = openDatabase("db", "1.0", "测试数据", 1024 * 1024, function () { });

回调函数，即在成功打开后，则执行回调函数。

2、创建数据表。

db.transaction(
    tx=>tx.executeSql('create table if not exists userTable (id integer primary key autoincrement,username varchar(12),password varchar(16),info text)'),
 [],function(){})

3、插入数据。

db.transaction(tx=>tx.executeSql('insert into userTable (username,password) values("zhangsan2","1234564")'), [],function(){})

4、查询数据

db.transaction(tx=>tx.executeSql('select * from userTable', [],function(a,b){console.log(b)}))

核心方法

openDatabase

我们可以使用 openDatabase() 方法来打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库

1. 数据库名称
2. 版本号
3. 描述文本
4. 数据库大小
5. 创建回调

示例代码：

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

transaction

这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。

db.transaction(callback,?errorCallback,?successCallback) 

1. callback，提供executeSql对象，function(tx){tx.executeSql() ………..}

2. 失败的回调函数。

3. 成功的回调函数。

executeSql

执行实际的sql查询。增、删、改、查以及创建数据表等等。

1. 要执行的sql。
2. 需要绑定的参数，绑定到对应的?的变量。
3. 回调函数。function(tx,results){....}

示例代码：

tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);

tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "<p>查询记录条数: " + len + "</p>";
      document.querySelector('#status').innerHTML +=  msg;    
      for (i = 0; i < len; i++){
         alert(results.rows.item(i).log );
      }
   }, null);