前端中的数据库

一、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()