新一代的前端存储方案--indexedDB

indexedDB是浏览器端存储大量数据的方法，它创造的数据可以查询，并且可以离线使用。基于实物操作的key-value型前端数据库

1.创建一个indexedDB数据库

        const request = indexedDB.open('myDatabase','1')

        indexedDB.open()创建一个indexedDB数据库，open方法可以接受两个参数
        第一个是数据库名，open会先去查找本地是否已有这个数据库，如果有则直接将整个数据库返回；如果没有则先创建这个数据可再返回
        第二个参数：表示数据库版本号，可选，默认1。必须是正整数
        

2.在通过对indexedDB.open()方法拿到一个数据库对象IDBOpenDBRequest我们可以通过监听这个对象的success事件和error时间来执行相应的操作

        request.addEventListener('success',e=>{
            console.log(e)
        })
        request.addEventListener('error',e=>{
            console.log(e)

        })

3.创建一个对象仓库object store

        对象仓库是indexedDB数据库的基础，其类似于MySQL中表的概念

        要创建一个对象仓库必须在upgradeneeded事件中，而upgradeneeded事件只会在版本号更新的时候触发，这是因为indexedDB API 
        中不允许数据库中的数据仓库在同一版本中发生变化


        const request = indexedDB.open('myDatabase',2);
        request.addEventListener('upgradeneeded', e =>{
            const db = e.target.result;
            const store = db.createObjectStore('users',{keypath:'id',aotoIncrement:false})
            第一个参数表示对象仓库的名称
            第二个可选参数，用于指定数据主键，以及是否自增主键

        })

4.创建事务

        一个数据库事务通常包含了一个序列的对数据库的读/写操作。它的存在包含以下两个目的
        1.为数据库操作序列提供了一个从失败中恢复到正常状态的方法，同时提供了数据库即使在异常状态下仍能保持一致性的方法
        2.当多个应用程序在并发访问数据库时，可以再这些应用程序之间提供一个隔离方法，以防止彼此的操作互相干扰
    数据库事务拥有以下四个特性，习惯称之为ACID特性
    原子性(Atomicty)：事务作为一个整体被执行，包含在其中的对数据库的操作要么被全部执行，要么都不执行
    一致性(Consistency):事务应确保数据库的状态从一个一致状态转变为另一个一致状态。一致状态的含义是数据库中的数据应满足完整性约束
    隔离性(Isolation):多个事务并发执行时，一个事务的执行不应影响其他事务的执行
    持久性(Durability):已被提交的事务对数据库的修改应该永久保存在数据库中


    const request = indexedDB.open('myDatabase', 3);


    request.addEventListener('success', e => {
        const db = e.target.result;


        const tx = db.transaction('Users','readwrite');
    });
    使用transaction()来创建一个事务.transaction()接受两个参数,第一个是你要操作的对象仓库名称,
    第二个是你创建的事务模式.传入 readonly时只能对对象仓库进行读操作,无法写操作.可以传入readwrite进行读写操作   

5.操作数据

    add() 如果该主键已经存在，则保存失败
    put() 如果该数据的主键在数据库中已经有相同主键的时候，则会修改数据库中对应主键的对象
    get()
    delete()


    const request = indexedDB.open('myDatabase',3)
    request.addEventListener('success',e =>(){
        const db = e.target.result;
        const tx = db.transaction('Users','readwrite');
        const store = tx.objectStore('Users');
        //添加数据
        const reqAdd = store.add({'userId',1'userName:'hah'});
        //获取数据
        const reqGet = store.get(1)
        //删除数据
        const reqDelete = store.delete(1)


        reqAdd.addEventListener('success',e => {
            console.log('')
        })
    })

6.使用游标获取一个区间内的数据

    openCursor()方法

未完待续...