前言

随着浏览器的功能不断增强，越来越多的网站开始考虑将大量的数据存储在客户端，相比后端接口，获取数据更快一些。现有的浏览器存储方案都不适合存储大量的数据。Cookie的大小不超过4KB，而且每次请求都会发送到服务器，LocalStorage在2.5～10MB直接，浏览器不同，存储的大小还不一样，而且不提供搜索功能，也不能建立自定义索引，webSQL大家可以课外了解一下，因为Web SQL Database规范已经被废弃，官方文档也解释的很清楚，webSQL规范底层采用SQLite的SQL方言，而作为一个标准，这是不可接受的，每个浏览器都有自己的实现以后就很能统一标准了，就像IE一样。最后，也是最重要的一个客户端存储大量数据的方案：IndexedDB。

而Dexie.js 对IndexedDB的封装，语法简单，可以快速方便的编写代码

符合	描述
++	自动递增主键
&	唯一主键
*	多值索引
+	复合索引

创建数据库db.js

import Dexie from 'dexie';
import { demos } from './initData';

var db = new Dexie('yolofyi');

db.version(1).stores({
  demos: '++id, text, category, &url, private, decs, updateTime',
});

//升级版本更新参数
db.version(2)
  .stores({
    demos:
      '++id, text, category, &url, private, isActive, decs, updateTime'
  })
  .upgrade(trans => {
    trans.websites.toCollection().modify(demo => {
      demo.isActive = true;
    });
  });
//数据库创建时批量初始化数据
db.on('populate', () => {
  db.demos.bulkAdd(demos); 
});

db.open();
export default db;

数据库操作demo.js

import db from './db';
const { demos } = db;
export default {
  async all() {
    return await demos.where('id').above(0).toArray();
  },
  async clear() {
    return await demos.clear();
  },
  async bulkAdd(param) {
    return await demos.bulkAdd(param);
  },
  async update(id, data) {
    data['updateTime'] = new Date().getTime();
    return await demos.update(id, data);
  },
  //param为{url:'xx'}
  async find(param) {
    return await demos.where(param).first();
  },
  async get(id) {
    return await demos.get(id);
  },
  async add(param) {
    param['updateTime'] = new Date().getTime();
    return await demos.add(param);
  },
  async remove(id) {
    return await demos.delete(id);
  },
};