IndexedDB使用

使用場景

• 具體使用場景：

存儲用戶瀏覽記錄。

• 適合的使用場景:

處于安全性考慮，數(shù)據(jù)不能存儲到服務(wù)器端。

數(shù)據(jù)為結(jié)構(gòu)性數(shù)據(jù)或者數(shù)據(jù)量較大，不適合使用cookies。

希望數(shù)據(jù)不隨著客戶清理緩存而刪除。此時我們一定一定要設(shè)計好清理瀏覽器端數(shù)據(jù)的時機。

相關(guān)站點

MDN文檔（中英） 訪問

IBM develoerWorks（中文） 訪問

這個可能是最權(quán)威的了吧，W3C（英文）訪問

ps:那么多好的資料了，為什么還寫博客？

做筆記；

我用的Angular2，語法糖是ES6的啊。

代碼段

代碼段來自項目，當(dāng)然是底層的與項目無關(guān)。這部分代碼大部分是已有的，來自一個已經(jīng)離開項目的同事，我寫了一部分。在此我只是記錄下而已。

// 項目使用的是Angular2,這是一個service。有關(guān)Angular2的寫法我不做說明。 import { Injectable } from '@angular/core';@Injectable() export class WorkIndexedDBService {// 聲明一些屬性，name：數(shù)據(jù)庫名,version：數(shù)據(jù)庫版本// name和version發(fā)生變化，瀏覽器就會重新建一個新的indexedDBprivate name: string = 'test-docView';private version: number = 1;private db: any = null;constructor() { }// 打開并創(chuàng)建數(shù)據(jù)庫public open(): Promise<any> {return new Promise<any>((resolve, reject) => {// 打開indexedDBlet req = indexedDB.open(this.name, this.version);// 打開DB成功后的回調(diào)req.onsuccess = function(event) {this.db = event.target.result;resolve();}.bind(this); // 此處說明.bind(this)，是為了把當(dāng)前類的屬性和方法傳入req.onsuccess的這個function里。即：.bind(this)的this是指本類WorkIndexedDBService// 打開DB失敗后的回調(diào)req.onerror = reject;// 打開新的數(shù)據(jù)庫時，會回調(diào)此函數(shù)，改變name和version均會建立新的DB，所以都會發(fā)生此回調(diào)。req.onupgradeneeded = function(event) {// 如果版本升級要記得刪除舊的數(shù)據(jù)庫表再建立新的。this.db = event.target.result;let storeNames = this.db.objectStoreNames;if (storeNames && storeNames.length > 0) {for (let i = 0 ; i < storeNames.length ; i++) {this.db.deleteObjectStore(storeNames[i]);console.log('deleteObjectStore', storeNames[i]);}}// 創(chuàng)建數(shù)據(jù)庫表this.createViewDB();}.bind(this);});}// 關(guān)閉數(shù)據(jù)庫public close(): void {this.db.close();}// 刪除數(shù)據(jù)庫public deleteDB(): Promise<any> {return new Promise<any>((resolve, reject) => {// 先關(guān)閉連接再刪this.close();let req = indexedDB.deleteDatabase(this.name);req.onsuccess = function(event) {this.db = null;resolve();}.bind(this);req.onerror = reject;});}// 添加數(shù)據(jù)// 注意：使用事務(wù)來做操作比較快。public insert(storeName: string,data: any): Promise<any> {return new Promise<any>((resolve, reject) => {let transaction = this.db.transaction(storeName, 'readwrite');let store = transaction.objectStore(storeName);let req = store.add(data);req.onsuccess = function(event) {resolve(req.result);};req.onerror = reject;});}// 批量添加數(shù)據(jù)public batchInsert(storeName: string,data: any[]): Promise<any> {if (!data || data.length === 0) {return Promise.resolve();}let transaction = this.db.transaction(storeName, 'readwrite');let store = transaction.objectStore(storeName);return new Promise<null>((resolve, reject) => {data.forEach(row => store.add(row);});transaction.oncomplete = resolve;transaction.onerror = reject;}).catch((error) => {console.error('添加' + storeName + '表數(shù)據(jù)失敗', error);return Promise.reject(error);});}// 刪除數(shù)據(jù)public workdelete(storeName: string,keyValue: any): Promise<any> {return new Promise<any>((resolve, reject) => {let transaction = this.db.transaction(storeName, 'readwrite');let store = transaction.objectStore(storeName);let req = store.delete(keyValue);req.onsuccess = resolve;req.onerror = reject;});}// 清楚全部數(shù)據(jù)public clearAllData(): Promise<any> {let storeNameList: Array<string> = new Array<string>();let storeNames = this.db.objectStoreNames;if (storeNames && storeNames.length > 0) {for (let i = 0 ; i < storeNames.length ; i++) {storeNameList.push(storeNames[i]);}}return Promise.all(storeNameList.map((storeName) => {return this.clear(storeName);}));}// 清空數(shù)據(jù)public clear(storeName: string): Promise<any> {return new Promise<any>((resolve, reject) => {let transaction = this.db.transaction(storeName, 'readwrite');let store = transaction.objectStore(storeName);let req = store.clear();req.onsuccess = resolve;req.onerror = reject;});}// 更新數(shù)據(jù)public update(storeName: string,data: any): Promise<any> {return new Promise<any>((resolve, reject) => {let transaction = this.db.transaction(storeName, 'readwrite');let store = transaction.objectStore(storeName);let req = store.put(data);req.onsuccess = resolve;req.onerror = reject;});}// 根據(jù)Key取得數(shù)據(jù)public selectByKey(storeName: string,keyValue: any): Promise<any> {return new Promise<any>((resolve, reject) => {let transaction = this.db.transaction(storeName, 'readonly');let store = transaction.objectStore(storeName);let req = store.get(keyValue);req.onsuccess = function() {resolve(req.result);}req.onerror = reject;});}// 根據(jù)索引取得數(shù)據(jù)public selectByIndex(storeName: string,indexName: string,indexValue: any): Promise<any[]> {return new Promise<any[]>((resolve, reject) => {let transaction = this.db.transaction(storeName, 'readonly');let store = transaction.objectStore(storeName);let index = store.index(indexName);let req = index.openCursor(indexValue);let result: any[] = new Array<any>();req.onsuccess = function(event) {let cursor = event.target.result;if (cursor) {result.push(cursor.value);cursor.continue();} else {resolve(result);}}req.onerror = reject;});}// 批量合并數(shù)據(jù)public batchMerge(storeName: string,data: any[],delFlagColName?: string,delFlagColName2?: string): Promise<any> {if (!data || data.length === 0) {return Promise.resolve();}let transaction = this.db.transaction(storeName, 'readwrite');let store = transaction.objectStore(storeName);return new Promise<null>((resolve, reject) => {data.forEach(row => {let keyPath = store.keyPath;let keyValue;if (typeof keyPath === 'string') {keyValue = row[keyPath];} else {keyValue = new Array();keyPath.forEach(key => {keyValue.push(row[key]);});}store.delete(keyValue);} else {store.put(row);}});transaction.oncomplete = resolve;transaction.onerror = reject;}).catch((error) => {console.error('更新' + storeName + '表數(shù)據(jù)失敗', error);return Promise.reject(error);});}// 數(shù)據(jù)庫初始化處理private createDB(): void {this.createConfigInfo();this.createStoreUserInfo();this.createStoreOrgInfo();this.createStoreUserOrgInfo();}// 創(chuàng)建系統(tǒng)配置表及索引private createConfigInfo(): void {let store = this.db.createObjectStore('ConfigInfo',{keyPath: 'key'});}// 創(chuàng)建用戶表及索引private createStoreUserInfo(): void {let store = this.db.createObjectStore('UserInfo',{keyPath: 'userId'});}// 創(chuàng)建組織表及索引private createStoreOrgInfo(): void {let store = this.db.createObjectStore('OrgInfo',{keyPath: 'orgId'});store.createIndex('parentOrgIdIndex',['parentOrgId', 'displayOrder'],{unique: false});}// 創(chuàng)建組織表及索引private createStoreUserOrgInfo(): void {let store = this.db.createObjectStore('UserOrgInfo',// S zhuruifei 2017-08-14 通訊錄數(shù)據(jù)結(jié)構(gòu)變更{keyPath: 'personRoleId'}// E zhuruifei 2017-08-14 通訊錄數(shù)據(jù)結(jié)構(gòu)變更);store.createIndex('orgIdIndex','orgId',{unique: false});}// 創(chuàng)建稿件瀏覽記錄表private createViewDB(): void{let store = this.db.createObjectStore('viewedDoc',{keyPath: 'docId'});store.createIndex('viewedDoc','docId',{unique: true});}// 批量查詢稿件瀏覽信息judgeIfWatched(storeName: string,data: any[]):Promise<any>{if (!data || data.length === 0) {return Promise.resolve();}return Promise.all(data.map((data)=> {return this.selectByKey(storeName,data.docId).then((res)=> {if(res&&res.docId) {data.viewed = "1";}return Promise.resolve();})})).catch((error) => {console.error(error);return Promise.reject(error);});}// 清除30天前的數(shù)據(jù)cleanViewDB(){this.open().then(()=>{// 通過IDBDatabase得到IDBTransactionlet transaction = this.db.transaction('viewedDoc', 'readonly');// 通過IDBTransaction得到IDBObjectStorelet objectStore = transaction.objectStore("viewedDoc");// 打開游標(biāo)，遍歷customers中所有數(shù)據(jù)objectStore.openCursor().onsuccess = function(event) {let cursor = event.target.result;if (cursor) {let key = cursor.key;let rowData = cursor.value;var time1 = new Date(rowData.lastViewTime);var time2 = new Date();if(Math.abs(time2.getTime() - time1.getTime())>2592000000){// 清除三十天前的數(shù)據(jù)this.workdelete('viewedDoc',cursor.key);}cursor.continue();}}.bind(this);})} }

感謝您看到了這里，這里是結(jié)尾。如果對您有幫助，我深感欣慰。自己給自己做廣告，不犯法吧？歡迎關(guān)注WeChat公眾號

**微信公眾號： 耐撕程序員

有資源

有想法

有技術(shù)貼

隨手掃一掃

不吃虧不上當(dāng)

大家一起天天向上

歡迎掃碼關(guān)注相互交流**

總結(jié)

以上是生活随笔為你收集整理的IndexedDB使用（基本函数封到Angular2的service里）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。