简介

前端从发展到现在已经形成了一定的浏览器存储数据的方式，有cookie、sessionStorage、localStorage、indexedDB以及被废弃的web sql.

特点：

键值对存储 每一条数据有一个主键，主键独一无二，实行key-value进行存储。

异步操作 实行异步操作。

支持事务 支持事务操作意味着数据操作只有成功和失败两种状态。

同源策略 每一个数据库对应创建它的域名，只能访问自身域名下的数据库。

存储空间大 支持大于250M的数据，甚至没有上限

支持二进制存储 可以存储二进制数据。

数据库操作

数据库连接与创建数据库

使用window对象indexedDB属性的open()方法，其中第一个参数是数据库名称，如果存在就打开数据库不存在就创建。第二个参数是数据库的版本是大于0的正整数。

数据库打开时，会触发4中事件:

success: 打开成功。

error: 打开失败

upgradeneeded: 第一次打开该数据库，或者数据库版本发生变化时触发。

blocked: 上一次的数据库连接还未关闭

注意：第一次打开数据库时，会先触发upgradeneeded事件，然后触发success事件。

let  request = indexedDB.open(name, 1);

request.onsuccess = function(e){

  db = e.target.result;

}

创建"对象仓库"

使用createObjectStore()进行对象仓库的创建。

第一个参数是仓库名称，同一个数据库中不可以重复。

第二个参数是一个对象，包含keyPath和autoIncrement，分别表示每条记录的键名和是否使用自动递增的整数作为键名，默认为false

db.createObjectStore(name[,options]);

//一般创建仓库都在upgradeneeded事件中

        request.addEventListener('upgradeneeded', e => {

            db = e.target.result;

            if(!db.objectStoreNames.contains('person')){

                let store = db.createObjectStore(table, {keyPath: 'keyword', autoIncrement: false});

            }

事务的操作

indexedDB支持事务操作，事务就是说在对数据库的操作只有成功和失败这两种可能，所以说在进行数据库的操作之前需要先创建事务。

name是要操作的仓库的名称

readwrite是对仓库进行什么操作

const tx = db.transaction(name, 'readwrite');

1

新增操作

indexedDB数据库也可以进行添加数据的操作，需要先添加事务,使用add进行添加，但是如果是相同的就会操作失败。还可以使用链式调用，indexedDB操作时异步操作，所以需要进行监听事件监听成功和失败。

const tx = db.transaction('name', 'readwrite');

const store = tx.objectStore('name');

const add = store.add({keyword:'table',s:0});

add.addEventListener('success', e => {

      console.log('操作成功');

})

add.addEventListener('error', e => {

        console.log('操作失败');

})

更新数据

如果想添加相同的数据可以使用put方法

const tx = db.transaction('name', 'readwrite');

const store = tx.objectStore('name');

const add = store.put({keyword:'table',s:0});

add.addEventListener('success', e => {

      console.log('操作成功');

})

add.addEventListener('error', e => {

        console.log('操作失败');

})

获取数据

使用get方法，通过key值获得该值。

const get = db.transaction('name','readwrite')

.objectStore('name')

 .get('keyword');

删除数据

使用delete方法，通过key值进行删除

const get = db.transaction('name','readwrite')

.objectStore('name')

 .delete('keyword');

游标的使用

indexedDB有一种游标操作，从仓库的第一条开始一直遍历到最后一条，使用openCursor创建，使用continue,result就是仓库中的所有数据。

const cursor = db.transaction('users').objectStore('users').openCursor();

cursor.addEventListener('success',e=>{

      let result = e.target.result;

       if(result){

            console.log('cursor',result);

             cursor.continue();//可以将地址指针指向下一个地址。

         }else{

               console.log('遍历完成',result);

        }

})