IndexedDB的使用

1.indexedDB特点

（1）键值对储存。IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

（2）异步。IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

（3）支持事务。IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

（4）同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

（5）储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

（6）支持二进制储存。IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

2.使用

定义一个表

export default {
  dbName: 'db_task', // *数据库名称
  version: 1, // 数据库版本号（默认为当前时间戳）
  tables: [ // *数据库的表，即ObjectStore
    {
      tableName: 'patrolInfo',
      option: {
        keyPath: 'task_uuid'
      },
      indexs: [ // 数据库索引（建议加上索引）
        {
          key: 'task_uuid', // *索引名
          option: { // 索引配置，此处表示该字段不允许重复
            unique: true
          }
        },
        {
          key: 'task_name' // 线路名称
        },
        {
          key: 'ppatrol_date' // 预期巡视日期
        },
        {
          key: 'patrol_route' // 巡视线路
        },
        {
          key: 'state' // 巡视状态
        },
        {
          key: 'team_name' // 巡视工班名称
        },
        {
          key: 'patrol_date' // 实际巡视日期
        },
        {
          key: 'has_point'
        },
        {
          key: 'patrol_route_name' // 巡视路线名称
        },
        {
          key: 'point_list' // 任务下面的点位详情
        },
        {
          key: 'patrol_track' // 执行任务时候的轨迹
        }

      ]
    }
  ]
};

引入

import Idb from 'idb-js'

Idb(db_task).then((db_task) =>{
    db_task.query({
        tableName: 'patrolInfo',
        condition: (item) => item.task_uuid ==this.$store.state.taskItem.task_uuid,
        success: (r) => {
            //执行逻辑
        }
    })

})

idb-jsAPI使用说明参考： idb-js: IndexDB操作库 - Gitee.com