tsp-component/lib/ajax/cache.ts

提供多端和react版本的UI组件

export default class Cache {
  constructor(dbName: string, tableName: string) {
    this.dbName = dbName;
    this.tableName = tableName;
  }
  /**
   * 数据库名
   */
  private dbName: string;
  /**
   * 表名
   */
  private tableName: string;
  /**
   * 打开或创建数据库
   */
  public open(method?: (db: any) => void): void {
    const requests = indexedDB.open(this.dbName, 1);
    requests.onupgradeneeded = (e) => {
      // alert('第一次打开数据库成功')
      const db = e.target['result'];
      if (!db.objectStoreNames.contains(this.tableName)) {
        db.createObjectStore(this.tableName, { keyPath: 'api' });
      }
    };
    requests.onsuccess = function(e: any): void {
      // alert('打开数据库成功')
      if (method) {
        const db = e.target['result'];
        method(db);
      }
    };
    requests.onerror = function(): void {
      // alert('打开数据库失败')
      console.log('indexeddb onerror');
    };
    requests.onblocked = function(): void {
      console.log('indexeddb onblocked');
    };
  }
  /**
   * 新增数据
   */
  public add(data: TspComponentAjaxCacheAddData): void {
    this.open((db) => {
      db.transaction([this.tableName], 'readwrite')
      .objectStore(this.tableName)
      .add(data)
      .onsuccess = function(e: any): void {
        // alert('写入数据成功')
        // console.log(e.target.result)
      };
    });
  }
  /**
   * 更新数据
   */
  public put(data: TspComponentAjaxCacheAddData): void {
    this.open((db) => {
      db.transaction([this.tableName], 'readwrite')
      .objectStore(this.tableName)
      .put(data)
      .onsuccess = function(e: any): void {
        // alert('写入数据成功')
        // console.log(e.target.result)
      };
    });
  }
  /**
   * 读取数据
   */
  public read(option: any): void {
    this.open((db) => {
      db.transaction([this.tableName], 'readonly')
      .objectStore(this.tableName)
      .get(option.key)
      .onsuccess = function(e: any): void {
        // alert('读取数据库成功')
        if (option.onsuccess) {
          let result = { value: '' };
          if (e.target.result) {
            result = e.target.result;
          }
          option.onsuccess(result);
        }
      };
    });
  }
}