TypeScript 的IndexedDB 帮助类 笔记

最近在做BI项目，需要用到IndexedDB来做Key-Value类型的表 来本地缓存GIS渲染需要海量数据。（不得不吐槽YD公司网络部搭了那辣鸡内网环境）

做法和传统用Redis做缓存思路一样：Web本地DB有则区DB没有则请求WebAPI

(尼玛蛋，为什么 LocalStore只支持10M！~)

class DataPak {
public CodeID: number = 1;
public Data: any;
public Message: string = '';
public Description: string = '成功';

    constructor(Data: any = null, CodeID: number = 1, Description: string = '成功', Msg: string = '') {
this.CodeID = CodeID;
this.Data = Data;
this.Message = Msg;
this.Description = Description;
    };
};



class DB_Instance {
private DB_Cache: string = 'DB_Cache';
private DB_VERSION: number = 1;
private STORE_GISCache: string = 'Store_GISCache';
private db_ins: any;
private DB: IDBFactory;
private request: IDBOpenDBRequest;

//初始化函数
    constructor() {
        let _this = this;
this.DB = window.indexedDB;
this.request = this.DB.open(this.DB_Cache, this.DB_VERSION);

this.request.onsuccess = function (ev: Event) {
            console.log('Successful request for IndexedDB.');

            _this.db_ins = _this.request.result;
var transaction = _this.db_ins.transaction(_this.STORE_GISCache, 'readwrite');

            transaction.oncomplete = function () {
                console.log('Transaction completed successfully.');
            }

            transaction.onerror = function (error) {
                console.log('An error occurred during the transaction: ' + error);
            }
        };

this.request.onupgradeneeded = function (this: IDBRequest, ev: Event) {

            _this.db_ins = this.result;
//创建 GIS 表
            let Store_GISCache = _this.db_ins.createObjectStore(
                _this.STORE_GISCache,
                {
                    keyPath: 'KeyID',
                    autoIncrement: 'true' //自动自增加
                }
            );

//索引 A
            Store_GISCache.createIndex(
'by_keyid',
'KeyID',
                {
'unique': true,
                }
            );

//索引 B
            Store_GISCache.createIndex(
'by_token',
'Token',
                {
'unique': true,
                }
            );

            console.log('The database has been created/updated.');
        };

this.request.onerror = function (ev: Event) {
            console.log('错误');
        }

        console.log('初始化成功');
    };


//暴露  GISCache表实例。
    getStore_GISCache(): IDBObjectStore {
        let transaction = this.db_ins.transaction(this.STORE_GISCache, 'readwrite');
        let store: IDBObjectStore = transaction.objectStore(this.STORE_GISCache);
return store;
    }

//Key-Value Query
    query_GISCache(token: string, func_onsuccess: any, func_onerror: any = null) {
        let transaction = this.db_ins.transaction(this.STORE_GISCache, 'readwrite');
        let store = transaction.objectStore(this.STORE_GISCache);

//let idIndex = store.index('by_keyid');
        let TokenIndex = store.index('by_token');

        let temp_request = TokenIndex.get(token);

        transaction.onsuccess = function () {
            let ret_pak = new DataPak(temp_request.result);
            func_onsuccess(ret_pak);
        };

        transaction.oncomplete = function () {
            let ret_pak = new DataPak(temp_request.result);
            func_onsuccess(ret_pak);
        };

        transaction.onerror = function (ev) {
if (func_onerror != null) {
                let ret_pak = new DataPak(null, 0, '错误');
                func_onerror(ret_pak);
            }
        };
    };

//Query List;
    queryList_GISCache(WhereFunc: any, func_onsuccess: any, func_onerror: any = null) {
        let transaction = this.db_ins.transaction(this.STORE_GISCache, 'readwrite');
        let store = transaction.objectStore(this.STORE_GISCache);

        let ret_pak = new DataPak([], 1, '成功');

        store.openCursor().onsuccess = function (event) {
var cursor = event.target.result;

if (cursor) {
                let Current_Value = cursor.value;
                let bEnable = WhereFunc(Current_Value);
if (bEnable) {
                    ret_pak.Data.push(Current_Value);
                }

else {
                    ret_pak.Data.push(Current_Value);
                }
                cursor.continue();
            }
else {
                func_onsuccess(ret_pak);
            }
        };

        store.openCursor().onerror = function (ev) {
if (func_onerror != null) {
                ret_pak.CodeID = 0;
                ret_pak.Description = '错误';
                func_onerror(ret_pak);
            }
        };
    };

//Insert
    insert_GISCache(val, func_onsuccess: any = null, func_onerror: any = null) {
        let transaction = this.db_ins.transaction(this.STORE_GISCache, 'readwrite');

        transaction.onsuccess = function () {
if (func_onsuccess != null) {
                let ret_pak = new DataPak();
                func_onsuccess(ret_pak);
            }
        };

        transaction.oncomplete = function () {
//console.log(this);
if (func_onsuccess != null) {
                let ret_pak = new DataPak();
                func_onsuccess(ret_pak);
            }
        };

        transaction.onerror = function (ev) {
if (func_onerror != null) {
                let ret_pak = new DataPak(null, 0, '错误');
                func_onerror(ret_pak);
            }
        };

        let store = transaction.objectStore(this.STORE_GISCache);
        store.put(val);
    };

//删除
    delete_GISCache(token: string, func_onsuccess: any = null, func_onerror: any = null) {

    };

//删除
    deleteList_GISCache() {

    }

};

var db_Instance = new DB_Instance();