IndexedDB使用

使用場景

• 具體使用場景：

存儲用戶瀏覽記錄。

• 適合的使用場景:

處于安全性考慮，數據不能存儲到服務器端。

數據為結構性數據或者數據量較大，不適合使用cookies。

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

相關站點

MDN文檔（中英） 訪問

IBM develoerWorks（中文） 訪問

這個可能是最權威的了吧，W3C（英文）訪問

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

做筆記；

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

代碼段

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

// 項目使用的是Angular2,這是一個service。有關Angular2的寫法我不做說明。 import { Injectable } from '@angular/core';@Injectable() export class WorkIndexedDBService {// 聲明一些屬性，name：數據庫名,version：數據庫版本// name和version發生變化，瀏覽器就會重新建一個新的indexedDBprivate name: string = 'test-docView';private version: number = 1;private db: any = null;constructor() { }// 打開并創建數據庫public open(): Promise<any> {return new Promise<any>((resolve, reject) => {// 打開indexedDBlet req = indexedDB.open(this.name, this.version);// 打開DB成功后的回調req.onsuccess = function(event) {this.db = event.target.result;resolve();}.bind(this); // 此處說明.bind(this)，是為了把當前類的屬性和方法傳入req.onsuccess的這個function里。即：.bind(this)的this是指本類WorkIndexedDBService// 打開DB失敗后的回調req.onerror = reject;// 打開新的數據庫時，會回調此函數，改變name和version均會建立新的DB，所以都會發生此回調。req.onupgradeneeded = function(event) {// 如果版本升級要記得刪除舊的數據庫表再建立新的。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]);}}// 創建數據庫表this.createViewDB();}.bind(this);});}// 關閉數據庫public close(): void {this.db.close();}// 刪除數據庫public deleteDB(): Promise<any> {return new Promise<any>((resolve, reject) => {// 先關閉連接再刪this.close();let req = indexedDB.deleteDatabase(this.name);req.onsuccess = function(event) {this.db = null;resolve();}.bind(this);req.onerror = reject;});}// 添加數據// 注意：使用事務來做操作比較快。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;});}// 批量添加數據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 + '表數據失敗', error);return Promise.reject(error);});}// 刪除數據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;});}// 清楚全部數據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);}));}// 清空數據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;});}// 更新數據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;});}// 根據Key取得數據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;});}// 根據索引取得數據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;});}// 批量合并數據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 + '表數據失敗', error);return Promise.reject(error);});}// 數據庫初始化處理private createDB(): void {this.createConfigInfo();this.createStoreUserInfo();this.createStoreOrgInfo();this.createStoreUserOrgInfo();}// 創建系統配置表及索引private createConfigInfo(): void {let store = this.db.createObjectStore('ConfigInfo',{keyPath: 'key'});}// 創建用戶表及索引private createStoreUserInfo(): void {let store = this.db.createObjectStore('UserInfo',{keyPath: 'userId'});}// 創建組織表及索引private createStoreOrgInfo(): void {let store = this.db.createObjectStore('OrgInfo',{keyPath: 'orgId'});store.createIndex('parentOrgIdIndex',['parentOrgId', 'displayOrder'],{unique: false});}// 創建組織表及索引private createStoreUserOrgInfo(): void {let store = this.db.createObjectStore('UserOrgInfo',// S zhuruifei 2017-08-14 通訊錄數據結構變更{keyPath: 'personRoleId'}// E zhuruifei 2017-08-14 通訊錄數據結構變更);store.createIndex('orgIdIndex','orgId',{unique: false});}// 創建稿件瀏覽記錄表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天前的數據cleanViewDB(){this.open().then(()=>{// 通過IDBDatabase得到IDBTransactionlet transaction = this.db.transaction('viewedDoc', 'readonly');// 通過IDBTransaction得到IDBObjectStorelet objectStore = transaction.objectStore("viewedDoc");// 打開游標，遍歷customers中所有數據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){// 清除三十天前的數據this.workdelete('viewedDoc',cursor.key);}cursor.continue();}}.bind(this);})} }

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

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

有資源

有想法

有技術貼

隨手掃一掃

不吃虧不上當

大家一起天天向上

歡迎掃碼關注相互交流**

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。