首页 > 代码库 > TypeScript 的IndexedDB 帮助类 笔记
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 =http://www.mamicode.com/ 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 帮助类 笔记
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。