最近在做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();

TypeScript 的IndexedDB 幫助類 筆記