webSql的简单小例子
初始化websql数据库的参数信息
1 var config = { 2 name: 'my_plan', 3 version: '', 4 desc: 'manage my plans', 5 size: 20 * 1024 6 };
7 var db = window.openDatabase(config.name, config.version, config.desc, config.size);
此函数为创建一个表
1 function crateTable() { 2 var sql = 'create table if not exists t_plan(title, content, target_time, create_time)'; 3 db.transaction(function(tx) { 4 tx.executeSql(sql, null, function(tx, rs) { 5 console.log('执行sql成功'); 6 }, errorCallback); 7 }); 8 }
接下来往表里增加一条数据
1 function addPlan(values) { 2 var sql = 'INSERT INTO t_plan (title, content, target_time, create_time) VALUES (?,?,?,?)'; 3 db.transaction(function(tx) { 4 tx.executeSql(sql, values, function(tx, rs) { 5 var effectRow = rs.rowsAffected; 6 console.log('影响记录条数:' + effectRow); 7 effectRow && console.log('执行sql成功'); 8 }, errorCallback); 9 }); 10 }
查询所以记录代码
1 function getPlanList() { 2 var sql = 'SELECT * FROM t_plan'; 3 db.transaction(function(tx) { 4 tx.executeSql(sql, null, function(tx, rs) { 5 console.log('list:' + rs.rows); 6 console.log('item:' + JSON.stringify(rs.rows.item(0))); 7 }, errorCallback); 8 }); 9 };
删除一条记录
1 function deletePlan(values) { 2 var sql = 'DELETE FROM t_plan WHERE title = ?'; 3 db.transaction(function(tx) { 4 tx.executeSql(sql, values, function(tx, rs) { 5 var effectRow = rs.rowsAffected; 6 console.log('影响记录条数:' + effectRow); 7 effectRow && console.log('执行sql成功'); 8 }, errorCallback); 9 }); 10 }
修改一条记录
1 function updatePlan(values) { 2 var sql = 'UPDATE t_plan SET content = ? WHERE title = ?'; 3 db.transaction(function(tx) { 4 tx.executeSql(sql, values, function(tx, rs) { 5 var effectRow = rs.rowsAffected; 6 console.log('影响记录条数:' + effectRow); 7 effectRow && console.log('执行sql成功'); 8 }, errorCallback); 9 }); 10 }
下面附上源码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> input { display: block; } </style> </head> <body> <input type="text" id="title" /> <input type="text" id="content" /> <input type="text" id="target_time" /> <button type="button" id="add_plan">add</button> <button type="button" id="select">select</button> <script type="text/javascript"> // (function() { document.getElementById("add_plan").addEventListener('click', function() { var title = document.getElementById("title").value; var content = document.getElementById("content").value; var targetTime = document.getElementById("target_time").value; var createTime = new Date().getTime(); var values = [title, content, targetTime, createTime]; addPlan(values); }); document.getElementById("select").addEventListener('click', function() { getPlanList(); }); // 判定当前环境是否支持websql // if(!window.openDatabase) { // console.log('当前环境不支持websql'); // return; // } var config = { //初始化websql数据库的参数信息 name: 'my_plan', version: '', desc: 'manage my plans', size: 20 * 1024 }; var db = window.openDatabase(config.name, config.version, config.desc, config.size); crateTable(db); function errorCallback(error) { console.error('error:' + error.message); } function crateTable() { var sql = 'create table if not exists t_plan(title, content, target_time, create_time)'; db.transaction(function(tx) { tx.executeSql(sql, null, function(tx, rs) { console.log('执行sql成功'); }, errorCallback); }); } function addPlan(values) { var sql = 'INSERT INTO t_plan (title, content, target_time, create_time) VALUES (?,?,?,?)'; db.transaction(function(tx) { tx.executeSql(sql, values, function(tx, rs) { var effectRow = rs.rowsAffected; console.log('影响记录条数:' + effectRow); effectRow && console.log('执行sql成功'); }, errorCallback); }); } function getPlanList() { var sql = 'SELECT * FROM t_plan'; db.transaction(function(tx) { tx.executeSql(sql, null, function(tx, rs) { console.log('list:' + rs.rows); console.log('item:' + JSON.stringify(rs.rows.item(0))); }, errorCallback); }); }; function deletePlan(values) { var sql = 'DELETE FROM t_plan WHERE title = ?'; db.transaction(function(tx) { tx.executeSql(sql, values, function(tx, rs) { var effectRow = rs.rowsAffected; console.log('影响记录条数:' + effectRow); effectRow && console.log('执行sql成功'); }, errorCallback); }); } function updatePlan(values) { var sql = 'UPDATE t_plan SET content = ? WHERE title = ?'; db.transaction(function(tx) { tx.executeSql(sql, values, function(tx, rs) { var effectRow = rs.rowsAffected; console.log('影响记录条数:' + effectRow); effectRow && console.log('执行sql成功'); }, errorCallback); }); } // }()); </script> </body> </html>