websql在浏览器运行的轻量级数据库,随着html5引入,既然是数据库我们就可以对它使用sql语句进行增删改查操作,对于学过sql的小伙伴来说,是一件很容易的事情。web sql数据库不是H5本身的规范的一部分,它是一个独立的规范,引入了一组使用sql语句来操作客户端数据库的api。规范工作早已停止,本地数据库还有另一个indexeddb,IndexedDB是为了能够在客户端存储大量的结构化数据,并且使用索引高效检索的API。这个我们在下一节中来了解一下它的使用。
核心函数
openDatabase() 打开一个数据库,若没有则创建一个数据库。五个参数分别:数据库名称,版本号,描述,大小,
var db=openDatabase('mydb','1.0','testDB',510241024);
transaction() 事务,若执行不成功,则回滚。
executeSql() 执行sql语句。
插入数据
创建一个数据库,并向其中插入几条数据。
var db=openDatabase('mydb','1.0','testDB',5*1024*1024);
db.transaction(function(tx){
tx.executeSql('CREATE TABLE IF NOT EXISTS logs (id unique, name)');
tx.executeSql('INSERT INTO logs (id,name) VALUES (1,"test1")');
tx.executeSql('INSERT INTO logs (id,name) VALUES (2,"test2")');
});
查询数据
查询数据,并让它显示在页面上。
db.transaction(function(tx) {
tx.executeSql('select * from logs',[],function(tx,res){
document.querySelector("#read").innerHTML=res.rows.item(0).name;
});
});
删除更新
db.transaction(function (tx) {
tx.executeSql('DELETE FROM logs WHERE id=1');
msg = '<p>删除 id 为 1 的记录。</p>'; document.querySelector('#read').innerHTML = msg;
});
db.transaction(function (tx) {
tx.executeSql('update logs set name="uptest2" where id=2');
msg = '<p>更新 id 为 2 的记录。</p>'; document.querySelector('#read').innerHTML = msg;
});
传入动态值
可以进行动态的插入数据。
function add(values) {
var sql = 'INSERT INTO logs(id,name) VALUES (?,?)';
db.transaction(function(tx) {
tx.executeSql(sql, values, function(tx, rs) { var effectRow = rs.rowsAffected; console.log('影响记录条数:' + effectRow);
effectRow && console.log('执行sql成功');
});
});
}
var arr=[3,"test3"];
add(arr);