IndexedDB和webSQL

IndexedDB

小结

1. 容量大，nosql，同域共享
2. api复杂
3. 可建立索引

存储大小： 桌面端50M，移动端5M

使用

var request = window.indexedDB.open('db', 1);// 打开名字为db的数据库，没有的话会创建一个
var db;
// onsuccess 监听数据库打开事件 每次打开成功都会触发
request.onsuccess = function (e) {
    db = request.result;
    console.log('数据库打开成功')
}
// onupgradeneeded 只在创建的时候触发，是唯一能声明表结构的地方
request.onupgradeneeded = function (e) {
    db = e.target.result;
    var objectStore;
    if(!db.objectStoreNames.contains('person')) {
        // createObjectStore 只能在这个onupgradeneeded中使用
        objectStore = db.createObjectStore('person', { keyPath: 'id' })
    }
    console.log('person created')
}

插入数据

// 第一个参数就是表 可以写入多个表
// 第二个参数是模式 readwrite表示：可读可写
db.transaction(['person'], 'readwrite')
    .objectStore('person') //从中选出一张表
    .add({ id: 1, name: 'betsy', height: 172 })

修改

db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .put({ id: 1, name: 'zoey', height: 172 })

删除

db.transaction(['person'], 'readwrite')
    .objectStore('person')
    .delete(1) //只需要选定key就可以了

查询

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

IndexedDB的开源库： Dexie.js

var db = new Dexie('mydb')
db.version(1).stores({
    // 声明了一个自增的id 
    person: "++id, name, age" // id, name, age可以作为person表的索引 不一定表就这几个字段
})
db.person.add({ name: 'betsy', age: 1 })
db.person.add({ name: 'lili', age: 10, email: '[e-mail]' })
db.person.put({ id: 2, name: 'lili2', age: 10, email: '[e-mail]' })
db.person.delete(2) // 删除id为2的数据
// 简单查询 db.person.get(1)
// db.person.where('age').above(1).toArray() // 筛选出年龄大于1 的数据
// 查询的时候都是promise 形式的 查询完需要调用 db.close()进行关闭

webSQL

小结

1. 标准不再更新，关系型，底层sqlite
2. Chrome中容量默认5M，支持同域名不同页面共享
3. 版本参数用于控制，如果打开版本与现有版本不一致 报错

须知

兼容：所有浏览器都支持

存储容量： Chrome中默认5M

创建数据库

var db = openDatabase(数据库名称，版本，备注，大小) 在chrome中大小不管填几都是5m

创建表

db.transacation(tx => {
    tx.executeSql('create table if not exists student (id unique, name)')
})// 表中有 id和name两个字段

增加数据

db.transacation(tx => {
    tx.executeSql('insert into student (id, name) values (?, ?)', [1, 'betsy']);
    tx.executeSql('insert into student (id, name) values (?, ?)', [2, 'zoey'])
})// ?,? 作为占位符

改是update，删除是delete

读数据

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