當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5本地存储——IndexedDB（二：索引）

發布時間：2023/11/29 HTML 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5本地存储——IndexedDB（二：索引）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在HTML5本地存儲——IndexedDB（一：基本使用）中介紹了關于IndexedDB的基本使用方法，很不過癮，這篇我們來看看indexedDB的殺器——索引。

熟悉數據庫的同學都知道索引的一個好處就是可以迅速定位數據，提高搜索速度，在indexedDB中有兩種索引，一種是自增長的int值，一種是keyPath：自己指定索引列，我們重點來看看keyPath方式的索引使用.

創建索引

我們可以在創建object store的時候指明索引，使用object store的createIndex創建索引，方法有三個參數

索引名稱
索引屬性字段名
索引屬性值是否唯一

這樣我們在students 上創建了兩個索引

利用索引獲取數據

function getDataByIndex(db,storeName){var transaction=db.transaction(storeName);var store=transaction.objectStore(storeName);var index = store.index("nameIndex");index.get('Byron').onsuccess=function(e){var student=e.target.result;console.log(student.id);}}

這樣我們可以利用索引快速獲取數據，name的索引是唯一的沒問題，但是對于age索引只會取到第一個匹配值，要想得到所有age符合條件的值就需要使用游標了

游標

在indexedDB中使用索引和游標是分不開的，對數據庫熟悉的同學很好理解游標是什么東東，有了數據庫object store的游標，我們就可以利用游標遍歷object store了。

使用object store的openCursor()方法打開游標

curson.contine()會使游標下移，知道沒有數據返回undefined

index與游標結合

要想獲取age為26的student，可以結合游標使用索引

這樣我們可是使用索引打開一個游標，參數下面會講到，在成功的句柄內獲得游標便利age為26的student，也可以通過index.openKeyCursor()方法只獲取每個對象的key值。

指定游標范圍

index.openCursor()/index.openKeyCursor()方法在不傳遞參數的時候會獲取object store所有記錄，像上面例子一樣我們可以對搜索進行篩選可以使用key range 限制游標中值的范圍，把它作為第一個參數傳給 openCursor() 或是 openKeyCursor() IDBKeyRange.only(value):只獲取指定數據 IDBKeyRange.lowerBound(value,isOpen)：獲取最小是value的數據，第二個參數用來指示是否排除value值本身，也就是數學中的是否是開區間 IDBKeyRange.upperBound(value,isOpen)：和上面類似，用于獲取最大值是value的數據 IDBKeyRange.bound(value1,value2,isOpen1,isOpen2)：不用解釋了吧

獲取名字首字母在B-E的student

?完整示例

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>IndexedDB</title> 5 </head> 6 <body> 7 <script type="text/javascript"> 8 function openDB (name,version) { 9 var version=version || 1; 10 var request=window.indexedDB.open(name,version); 11 request.onerror=function(e){ 12 console.log(e.currentTarget.error.message); 13 }; 14 request.onsuccess=function(e){ 15 myDB.db=e.target.result; 16 }; 17 request.onupgradeneeded=function(e){ 18 var db=e.target.result; 19 if(!db.objectStoreNames.contains('students')){ 20 var store=db.createObjectStore('students',{keyPath: 'id'}); 21 store.createIndex('nameIndex','name',{unique:true}); 22 store.createIndex('ageIndex','age',{unique:false}); 23 } 24 console.log('DB version changed to '+version); 25 }; 26 } 27 28 function closeDB(db){ 29 db.close(); 30 } 31 32 function deleteDB(name){ 33 indexedDB.deleteDatabase(name); 34 } 35 36 function addData(db,storeName){ 37 var transaction=db.transaction(storeName,'readwrite'); 38 var store=transaction.objectStore(storeName); 39 40 for(var i=0;i<students.length;i++){ 41 store.add(students[i]); 42 } 43 } 44 45 function getDataByKey(db,storeName,value){ 46 var transaction=db.transaction(storeName,'readwrite'); 47 var store=transaction.objectStore(storeName); 48 var request=store.get(value); 49 request.onsuccess=function(e){ 50 var student=e.target.result; 51 console.log(student.name); 52 }; 53 } 54 55 function updateDataByKey(db,storeName,value){ 56 var transaction=db.transaction(storeName,'readwrite'); 57 var store=transaction.objectStore(storeName); 58 var request=store.get(value); 59 request.onsuccess=function(e){ 60 var student=e.target.result; 61 student.age=35; 62 store.put(student); 63 }; 64 } 65 66 function deleteDataByKey(db,storeName,value){ 67 var transaction=db.transaction(storeName,'readwrite'); 68 var store=transaction.objectStore(storeName); 69 store.delete(value); 70 } 71 72 function clearObjectStore(db,storeName){ 73 var transaction=db.transaction(storeName,'readwrite'); 74 var store=transaction.objectStore(storeName); 75 store.clear(); 76 } 77 78 function deleteObjectStore(db,storeName){ 79 var transaction=db.transaction(storeName,'versionchange'); 80 db.deleteObjectStore(storeName); 81 } 82 83 function fetchStoreByCursor(db,storeName){ 84 var transaction=db.transaction(storeName); 85 var store=transaction.objectStore(storeName); 86 var request=store.openCursor(); 87 request.onsuccess=function(e){ 88 var cursor=e.target.result; 89 if(cursor){ 90 console.log(cursor.key); 91 var currentStudent=cursor.value; 92 console.log(currentStudent.name); 93 cursor.continue(); 94 } 95 }; 96 } 97 98 function getDataByIndex(db,storeName){ 99 var transaction=db.transaction(storeName); 100 var store=transaction.objectStore(storeName); 101 var index = store.index("ageIndex"); 102 index.get(26).onsuccess=function(e){ 103 var student=e.target.result; 104 console.log(student.id); 105 } 106 } 107 108 function getMultipleData(db,storeName){ 109 var transaction=db.transaction(storeName); 110 var store=transaction.objectStore(storeName); 111 var index = store.index("nameIndex"); 112 var request=index.openCursor(null,IDBCursor.prev); 113 request.onsuccess=function(e){ 114 var cursor=e.target.result; 115 if(cursor){ 116 var student=cursor.value; 117 console.log(student.name); 118 cursor.continue(); 119 } 120 } 121 } 122 123 var myDB={ 124 name:'test', 125 version:1, 126 db:null 127 }; 128 129 var students=[{ 130 id:1001, 131 name:"Byron", 132 age:24 133 },{ 134 id:1002, 135 name:"Frank", 136 age:30 137 },{ 138 id:1003, 139 name:"Aaron", 140 age:26 141 },{ 142 id:1004, 143 name:"Casper", 144 age:26 145 }]; 146 </script> 147 </body> 148 </html> View Code

?

最后

有了游標和索引才能真正發揮indexedDB為例，是不是感覺比自定義對象強大方便了很多呢。

轉載于:https://www.cnblogs.com/dolphinX/p/3416889.html

總結

以上是生活随笔為你收集整理的HTML5本地存储——IndexedDB（二：索引）的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： ios下使用rsa算法与php进行加解密
下一篇：小强的HTML5移动开发之路（43）——