websql在瀏覽器運行的輕量級數據庫，隨著html5引入，既然是數據庫我們就可以對它使用sql語句進行增刪改查操作，對于學過sql的小伙伴來說，是一件很容易的事情。
核心函數
openDatabase() 打開一個數據庫，若沒有則創建一個數據庫。
//五個參數分別：數據庫名稱，版本號，描述，大小
var db=openDatabase('mydb','1.0','testDB',5*1024*1024);
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")');
});
2017-08-21_230256.png
查詢數據
查詢數據，并讓它顯示在頁面上。
db.transaction(function(tx) {
tx.executeSql('select * from logs',[],function(tx,res){
document.querySelector("#read").innerHTML=res.rows.item(1).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;
});
2017-08-21_231844.png
傳入動態值
可以進行動態的插入數據。
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);
2017-08-21_235308.png
