前端数据存储方式之indexedDB

简介

前端从发展到现在已经形成了一定的浏览器存储数据的方式，有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');

新增操作

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);
        }
})

相关代码详见 https://github.com/youyou1995/learn/blob/master/javascript/indexedDB/indexedDB.js