websql在瀏覽器運行的輕量級數(shù)據(jù)庫，隨著html5引入，既然是數(shù)據(jù)庫我們就可以對它使用sql語句進行增刪改查操作，對于學過sql的小伙伴來說，是一件很容易的事情。

核心函數(shù)

openDatabase() 打開一個數(shù)據(jù)庫，若沒有則創(chuàng)建一個數(shù)據(jù)庫。

//五個參數(shù)分別：數(shù)據(jù)庫名稱，版本號，描述，大小
var db=openDatabase('mydb','1.0','testDB',5*1024*1024);

transaction() 事務，若執(zhí)行不成功，則回滾。
executeSql() 執(zhí)行sql語句。

插入數(shù)據(jù)

創(chuàng)建一個數(shù)據(jù)庫，并向其中插入幾條數(shù)據(jù)。

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

查詢數(shù)據(jù)

查詢數(shù)據(jù)，并讓它顯示在頁面上。

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

傳入動態(tài)值

可以進行動態(tài)的插入數(shù)據(jù)。

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('影響記錄條數(shù):' + effectRow);
                effectRow && console.log('執(zhí)行sql成功');
          });
    });
}
var arr=[3,"test3"];
add(arr);

2017-08-21_235308.png