前端中的數據庫

一、web sql

 

一、函數創建數據庫

var db = openDatabase('zxd',1,'person',0)

1、數據庫名
2、版本
3、備注
4、存儲容量的限制 （最高5M）

 

二、創建表

db.transaction(tx=>{
tx.executeSql('create table if not exists student (id unique,name)')
})

 

三 插入數據

db.transaction(tx=>{
tx.executeSql('insert into student (id,name) values (?,?)', [1,"撒旦"]);
tx.executeSql('insert into student (id,name) values (?,?)', [2,"康斯坦丁"])
})

 

相似的 改就是update 、刪除就是delete

 

四 讀取語句

db.transaction(tx=>{
tx.executeSql("select * from student",[],(tx,res)=>{
let rows = res.rows;
let len = rows.length
for (var i=0;i<len;i++){
console.log(rows.item(i))
}
})
})

 

 

 

總結：

1、底層為sqlite ,關系型、標准不再更新了
2、chrome中容量5M,支持同域名不同頁面共享
3、版本參數用於控制，如果打開版本和現有版本不一致會報錯。

 

二、indexedDB

pc 50M 移動端5M上限

一、創建數據庫

var request = window.indexedDB.open('db',1);

var db;
request.onsuccess = function (event) {
db =request.result;
console.log("數據庫打開成功")
};

request.onupgradeneeded = function (event) {
db = event.target.result;
var objectStore;
if (!db.objectStoreNames.contains('person')) {
ObjectStore = db.createObjectStore('person', {keyPath:"id"})
}
console.log("person created")
}

 

二 、增加數據 add

db.transaction(['person'],'readwrite')
.objectStore('person')
.add({id:1,name:'haha',age:23})

三、修改數據 put
db.transaction(['person'],'readwrite')
.objectStore('person')
.put({id:2,name:'zxddd',age:17})

 

四、刪除數據 delete

db.transaction(['person'],'readwrite')
.objectStore('person')
.delete({id:2,name:'zxddd',age:17})

 

五、查

var request2 =
db.transaction(['person'],'readwrite')
.objectStore('person')
.get(1);
request2.onsuccess= function (e) {
console.log(request2.result)
}

 

小結

1、容量大，nosql ，同域共享
2、api復雜，版本概念難理解
3、可建立索引

 

dexie.org 封裝了數據庫

var db = new Dexie("mydb")

db.version(1).stores({
person:"++id,name,age"
})

db.person.add({name:"ZS",age:20})

db.person.add({name:"LS",age:20,email:"xx@11"})

db.person.put({id:2,name:"LS",age:20,email:"xx@11"})

db.person.delete(1) 刪除id為1

await db.person.get(1) 查詢id為1

db.person.where('age').above(30).toArray() 查詢age>30

db.close()