indexDB

Cookie

cookie可以做前端存储方案，但是有很多局限性。

• 存储空间有限4k，
• 存储有效时间有限制
• 存在cookie中的数据，在每次请求的时候都会将它带上，使得每次请求的数据都会无意义增大
• cookie设计之初并不是让前端存数据用的，它是为了让网站验证用户身份用的，存储功能只是一个手段而已

web Storage

• 永久存储localStorage
• 会话期间存储sessionStorage

优势

• 存储空间更大，有5M大小
• 在浏览器发送请求是不会带上web Storage里的数据
• 更加友好的API
• 可以做永久存储（localStorage）

局限

• 随着web应用程序的不断发展，5M的存储大小对于一些大型的web应用程序来说有些不够
• web Storage只能存储string类型的数据，对于object类型的数据只能先用JSON.stringify()转换下在存储

基于以上原因，提出了浏览器数据库存储，web SQL Database （已经被弃用） 和 IndexedDB（索引数据库）、

IndexedDB

介绍

IndexedDB是一种使用浏览器存储大量数据的方法，它创造的数据可以被查询，并且可以离线使用。

概念

使用IndexedDB，使用一个key索引，可以存储或者获取数据。是实务（transaction）中完成对数据的修改。遵从同源协议(same-origin policy)。所以只能访问同域中存储的数据，而不能访问其他域的

API包含异步（asynchronous）API 和同步（synchronous）API两种。异步API适合大多数情况，同步API必须同WebWorkers一同使用，目前，没有主流浏览器支持同步API。即使同步API被支持了，你也会在大多数情况使用异步API

IndexedDB是WebSQL数据库的取代品，W3C组织在2010年11月18日废弃了webSql.IndexedDB和WebSQL的不同点在于WebSQL是关系型数据库（复杂）IndexedDB是key-value型数据库（简单好使）

使用

创建一个IndexedDB数据库

// 创建数据库
// 第一个参数为数据库名称，第二个数据库为版本号，返回一个IDBOpenDBRequest对象用于操作数据库。
// 对于open()的第一个参数数据库名，open()会先去查找本地是否已有这个数据库，如果有则直接将这个数据库返回，如果没有，则先创建这个数据库，再返回。对于第二个参数版本号，则是一个可选参数，如果不传，默认为1，但是如果传入必须是一个整数
const request = indexedDB.open('myDatabase', 1)
request.addEventListener('success', e => {
    console.log('连接数据库成功')
})
request.addEventListener('error', e => {
    console.log('连接数据库失败')
})

创建一个对象仓库

在有了数据库之后，想要去存储数据，但是单只有数据库还不够，还需要有对象仓库（object store），对象仓库（object store）是IndexedDB数据库的基础，类似于MySQL中表的概念

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

// 监听upgradeneeded事件，在事件触发时使用createObjectStore()方法创建了一个对象仓库。createObjectStore()方法接受两个参数，第一个是对象仓库的名称，在同一个数据库中，仓库名不能重复，第二个参数是可选参数，用于指定数据的主键，以及是否自增主键
const request = indexedDB.open('myDatabase', 2)
request.addEventListener('upgradeneeded', e => {
    const db = e.target.result
    const store = db.createObjectStore('User', {keyPath: 'userId', autoIncrement: false});
    console.log('创建对象仓库成功')
})

创建事务

一个数据库事务通常包含了一个序列的对数据库的读/写操作。它的存在包含了两个以上目的
1、为数据库操作序列提供了一个从失败中恢复到正常状态的方法，同时提供了数据库即使在异常状态下仍然保持一致性的方法
2、当多个应用程序在并发访问数据库时，可以在这些应用程序之间提供一个隔离方法，以防止彼此的操作相互干扰

数据库事务四个特性，ACID特性

• 原子性(Atomicity)：事务作为一个整体被执行，包含在其中的对数据库的操作要么全部被执行，要么都不执行
• 一致性(Consistency)：事务应确保数据库的状态从一个一致状态转变为另一个一致状态，一致状态的含义是数据库中的数据应满足完整性约束
• 隔离性(Isolation)：多个事务并发执行时，一个事务的执行不影响其他事务的执行
• 持久性(Durability)：已被提交的事务对数据库的修改应该永久保存在数据库中

// transacton()来创建一个事务，transaction()接受两个参数，第一是要操作的对象仓库名称，第二个是你创建的事务模式。传入readonly时只能对对象仓库进行操作，无法写操作，可以传入readwrite进行读写操作
const request = indexedDB.open('myDatabase', 3)
request.addEventListener('success', e => {
    const db = e.target.result
    const tx = db.transaction('Users', 'readwrite')
})

操作数据

• add()：增加数据。接受一个参数，为需要保存到对象仓库中的对象
• put()：增加或修改数据。接受一个参数，为需要保存到对象仓库中的对象
• get()：获取数据。接受一个参数，为需要获取数据的主键值
• delete()：删除数据。接受一个参数，为需要获取数据的主键值

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

添加数据

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': '李白', 'age': 24});
    reqAdd.addEventListener('success', e => {
      console.log('保存成功')
    })
});

获取数据

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 reqGet = store.get(1);
    reqGet.addEventListener('success', e => {
      console.log(this.result.userName);    // 李白
    })
});

删除数据

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 reqDelete = store.delete(1);
    reqDelete.addEventListener('success', e => {
      console.log('删除数据成功');    // 李白
    })
});

使用游标

使用游标，一次性来获取一个区间内的数据

要使用游标，需要使用对象仓库上的openCursor()方法创建并打开。openCursor()方法接受两个参数

openCursor(range?: IDBKeyRange | number | string | Date | IDBArrayKey, direction?: IDBCursorDirection): IDBRequest;

第一个是范围，范围可以是一个IDBKeyRange对象，用以下方式创建

// boundRange 表示主键值从1到10(包含1和10)的集合。
// 如果第三个参数为true，则表示不包含最小键值1，如果第四参数为true，则表示不包含最大键值10，默认都为false
var boundRange = IDBKeyRange.bound(1, 10, false, false);

// onlyRange 表示由一个主键值的集合。only() 参数则为主键值，整数类型。
var onlyRange = IDBKeyRange.only(1);

// lowerRaneg 表示大于等于1的主键值的集合。
// 第二个参数可选，为true则表示不包含最小主键1，false则包含，默认为false
var lowerRange = IDBKeyRange.lowerBound(1, false);

// upperRange 表示小于等于10的主键值的集合。
// 第二个参数可选，为true则表示不包含最大主键10，false则包含，默认为false
var upperRange = IDBKeyRange.upperBound(10, false);

第二个参数是方向

• next：游标中的数据按主键值升序排列，主键值相等的数据都被读取
• nextunique：游标中的数据按主键值升序排列，主键值相等只读取第一条数据
• prev：游标中的数据按主键值降序排列，主键值相等的数据都被读取
• prevunique：游标中的数据按主键值降序排列，主键值相等只读取第一条数据

const request = indexedDB.open('myDatabase', 4);
request.addEventListener('success', e => {
    const db = e.target.result
    const tx = db.transaction('Users','readwrite');
    const store = tx.objectStore('Users');
    const range = IDBKeyRange.bound(1,10);
    const req = store.openCursor(range, 'next');
    req.addEventListener('success', e => {
      const cursor = this.result;
        if(cursor){
            console.log(cursor.value.userName);
            cursor.continue();
        }else{
            console.log('检索结束');
        }
    })
});

在上面的代码中如果检索到符合条件的数据时

使用cursor.value拿到数据.
使用cursor.updata()更新数据.
使用cursor.delete()删除数据.
使用cursor.continue()读取下一条数据.

索引

创建索引

使用对象仓库的createIndex()方法创建一个索引

createIndex(name: string, keyPath: string | string[], optionalParameters?: IDBIndexParameters): IDBIndex;

createIndex()方法接收三个参数

1、第一个参数name是索引名，不能重复

2、第二个参数keyPath是在存储对象上的那个属性上建立索引，可以是一个单个的key值，也可以是一个包含key值集合的数组

3、第三个参数optionalParameter是一个可选的对象参数{unique, multiEntry}

• unique：用来指定索引值是否可以重复，为true代表不能相同，为false时代表可以相同
• multiEntry：当第二个参数keyPath为一个数组时，如果multiEntry是true，则会以数组中的每个元素建立一条索引，如果是false，则以整个数组为keyPath值，添加一条索引

例子

//建立一条用户年龄的索引
const request = indexedDB.open('myDatabase', 5);
request.addEventListener('upgradeneeded', e => {
    const db = e.target.result;
    // 创建对象仓库
    const  store = db.createObjectStore('Users', {keyPath: 'userId', autoIncrement: false});
    const idx = store.createIndex('ageIndex','age',{unique: false})
});

使用索引

// 传入索引名称
const index = store.index('ageIndex')

// 拿到年龄在20岁以上的数据，升序排列
const request = indexedDB.open('myDatabase', 4);
request.addEventListener('success', e => {
    const db = e.target.result;
    const tx = db.transaction('Users','readwrite');
    const store = tx.objectStore('Users');
    const index = store.index('ageIndex');
    const req = index.openCursor(IDBKeyRange.lowerBound(20), 'next');
    req.addEventListener('success', e => {
      const cursor = e.target.result;
        if(cursor){
            console.log(cursor.value.age);
            cursor.continue();
        }else{
            console.log('检索结束');
        }
    })
});

indexedDB的兼容性

image.png