html5使用indexdb的程式碼實例分享（圖文）-H5教程-PHP中文網

首頁

web前端

H5教程

html5使用indexdb的程式碼實例分享（圖文）

黄舟

Mar 31, 2017 am 11:50 AM

前面說過html5對於離線應用程式的支援是很好的，不禁支援localstorage這樣在客戶端儲存一個鍵值對的方式而且還可以引用manifest文件，將需要快取的檔案在其中定義，其實html5中也可以使用indexdb，又稱為索引資料庫，該資料庫可以用來儲存離線物件。下面開始：

請求完成後的回呼

所有的請求完成之後都會有一個回調，onsuccess 和onerror，其中：onsuccess表示請求成功時候的回調，onerror 表示請求失敗時候的回調。同時也可以使用javascript中的 try/catch來捕捉異常，在進一步的處理。

使用資料庫

一個資料庫一次只能有一個版本，初次建立改資料庫的時候版本號碼是0，當我們需要更改已經建立好的資料庫時候，就需要更改其版本號，當更改版本號的時候，會觸發upgradeneeded回調，所以修改資料庫或儲存物件的方法必須放到upgradeneeded方法中執行。

判斷目前瀏覽器是否支援indexdb

if (!window.indexedDB) {
    window.alert("您的浏览器不支持indexdb");
}<!--这里indexDB是window对象的属性，类似于alert所以window可以省略-->

建立資料庫

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        function createDatabase(indexDbName) {
            //调用 open 方法并传递数据库名称。如果不存在具有指定名称的数据库，则会创建该数据库
            var openRequest = indexedDB.open(indexDbName);            var db;
            openRequest.onerror = function(e) {//当创建数据库失败时候的回调
                console.log("Database error: " + e.target.errorCode);
            };
            openRequest.onsuccess = function(event) {
                console.log("Database created");
                db = openRequest.result;//创建数据库成功时候，将结果给db，此时db就是当前数据库
                //alert("this is :"+db);
            };
            openRequest.onupgradeneeded = function (evt) {//更改数据库，或者存储对象时候在这里处理

            };
        }    </script></head><body>
    <a href="javascript:createDatabase(&#39;firstdb&#39;)">createDatabase</a></body></html>

上面這段程式碼可以建立一個資料庫到客戶端。
html5使用indexdb的程式碼實例分享（圖文）

刪除資料庫

透過呼叫 deleteDatabase 方法，並且傳入需要刪除的資料庫名稱來刪除現有資料庫。

function deleteDatabase(indexDbName) {
    var deleteDbRequest = indexedDB.deleteDatabase(indexDbName);
    deleteDbRequest.onsuccess = function (event) {
        console.log("detete database success");
    };
    deleteDbRequest.onerror = function (e) {
        console.log("Database error: " + e.target.errorCode);
    };
}

儲存資料

objectstore

在indexdb中沒有資料表的概念，而是使用objectstore來儲存物件的，一個資料庫中可以包含多個objectStore，objectStore是一個靈活的資料結構，可以存放多種類型資料。我們可以使用每筆記錄中的某個指定欄位作為鍵值（keyPath），也可以使用自動產生的遞增數字作為鍵值（keyGenerator），也可以不指定。選擇鍵的類型不同，objectStore可以儲存的資料結構也有差異

事物

#在更新資料庫內容或插入新的資料時候，需要先開啟到事物，並且需要製定當前事物操作了那些objectstore。

交易有三種模式

只讀：read，不能修改資料庫數據，可以並發執行
##讀寫：readwrite，可以進行讀寫操作
版本變更：veri
onchange

因為對新數據的操作都需要在transaction中進行，而transaction又要求指定object store，所以我們只能在建立資料庫的時候初始化object store以供後面使用。

指定keyid新增資料

指定keyid，可以理解為指定一個主鍵

//添加数据
        function insertAnObj(indexDbName) {
            var userinfos=[{ 
                                id:1001, 
                                name:"小李", 
                                age:24 
                            },{ 
                                id:1002, 
                                name:"老王", 
                                age:30 
                            },{ 
                                id:1003, 
                                name:"王麻子", 
                                age:26 
                            }];            
                            var openRequest = indexedDB.open(indexDbName,1);
            openRequest.onerror = function(e) {//当创建数据库失败时候的回调
                console.log("Database error: " + e.target.errorCode);
            };
            openRequest.onsuccess = function(event) {
                console.log("Database created");
                db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
                //alert("this is :"+db);
                //打开和userinfo相关的objectstore的事物
                var transaction = db.transaction("userinfo",&#39;readwrite&#39;); 
                var store=transaction.objectStore("userinfo");                
                for(var i=0;i<userinfos.length;i++){                    
                //alert("add"+userinfos[i]);
                    store.add(userinfos[i]);//将对象添加至userinfo相关的objectstore中
                }
            };
            openRequest.onupgradeneeded = function(event) {
               var db = event.target.result;                
               //在第一次创建数据库的时候，就创建userinfo相关的objectstore，以供后面添加数据时候使用
                if(!db.objectStoreNames.contains(&#39;userinfo&#39;)){                    
                //keyPath:Javascript对象，对象必须有一属性作为键值
                    db.createObjectStore(&#39;userinfo&#39;,{keyPath:"id"});
                }

            }
}

html5使用indexdb的程式碼實例分享（圖文）

使用autoIncrement新增資料

指定autoIncrement，可以理解為指定了一個主鍵自動增長。

//指定主键自动增长
        function insertAutoInc(indexDbName) {
            var userinfos=[{ 
                                id:1001, 
                                name:"小李", 
                                age:24 
                            },{ 
                                id:1002, 
                                name:"老王", 
                                age:30 
                            },{ 
                                id:1003, 
                                name:"王麻子", 
                                age:26 
                            }];            
                            var openRequest = indexedDB.open(indexDbName,2);
            openRequest.onerror = function(e) {//当创建数据库失败时候的回调
                console.log("Database error: " + e.target.errorCode);
            };
            openRequest.onsuccess = function(event) {
                console.log("Database created");
                db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
                //alert("this is :"+db);
                //打开和userinfo相关的objectstore的事物
                var transaction = db.transaction("userinfo",&#39;readwrite&#39;); 
                var store=transaction.objectStore("userinfo");                
                for(var i=0;i<userinfos.length;i++){                    
                //alert("add"+userinfos[i]);
                    store.add(userinfos[i]);//将对象添加至userinfo相关的objectstore中
                }
            };
            openRequest.onupgradeneeded = function(event) {
               var db = event.target.result;                
               //在第一次创建数据库的时候，就创建userinfo相关的objectstore，以供后面添加数据时候使用
                if(!db.objectStoreNames.contains(&#39;userinfo&#39;)){                    
                //keyPath:Javascript对象，对象必须有一属性作为键值
                    db.createObjectStore(&#39;userinfo&#39;,{autoIncrement: true});
                }
            }
}

html5使用indexdb的程式碼實例分享（圖文）

查找資料

根據id查找資料

之前我們已經加入了定義key為autoincreament類型方式的數據，現在就可以根據id來找出單一資料了。

function findDbdata(indexDbName,value) {
            var openRequest = indexedDB.open(indexDbName);            
            var db;
            openRequest.onerror = function(e) {//当创建数据库失败时候的回调
                console.log("Database error: " + e.target.errorCode);
            };
            openRequest.onsuccess = function(event) {
                console.log("Database created");
                db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
                var transaction = db.transaction("userinfo",&#39;readwrite&#39;);                
                var objectStore = transaction.objectStore("userinfo");                
                //var cursor = objectStore.openCursor();
                var request = objectStore.get(Number(1));//查找i=1的对象，这里使用Number将1转换成数值类型
                request.onsuccess = function(e) {
                    var res = e.target.result; //查找成功时候返回的结果对象
                    console.dir(res);                    
                    if (res) {                        
                    for (var field in res) { //遍历每一个对象属性
                            console.log(field+":"+res[field]);                            
                            // alert(res[field]);
                        };
                    };
                }
            };
            openRequest.onupgradeneeded = function (event) {//更改数据库，或者存储对象时候在这里处理

            };
}

html5使用indexdb的程式碼實例分享（圖文）

找到所有資料

function findAllDbdata(indexDbName) {
            var openRequest = indexedDB.open(indexDbName);            
            var db;
            openRequest.onsuccess = function(event) {
                console.log("Database created");
                db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
                var transaction = db.transaction("userinfo",&#39;readonly&#39;);                
                var objectStore = transaction.objectStore("userinfo");                
                var cursor = objectStore.openCursor();
                cursor.onsuccess = function(e) { 
                    var res = e.target.result; 
                    if(res) { 
                        console.log("Key", res.key); 
                        var request = objectStore.get(Number(res.key));//根据查找出来的id，再次逐个查找
                        request.onsuccess = function(e) {
                            var res = e.target.result; //查找成功时候返回的结果对象
                            //console.dir(res);
                            if (res) {                                
                            for (var field in res) { //遍历每一个对象属性
                                    console.log(field+":"+res[field]);                      
                                    // alert(res[field]);
                                };
                            };
                        }
                        res.continue(); 
                    } 
                }   
            };
        }

html5使用indexdb的程式碼實例分享（圖文）

#根據id刪除資料

刪除跟

新增一樣，需要建立事務，然後呼叫刪除介面delete來刪除資料

function deleteDataById(indexDbName) {
            var openRequest = indexedDB.open(indexDbName);            
            var db;
            openRequest.onsuccess = function(event) {
                db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
                var transaction = db.transaction("userinfo",&#39;readwrite&#39;);                
                var objectStore = transaction.objectStore("userinfo");                
                var request = objectStore.delete(Number(2));//根据查找出来的id，再次逐个查找
                request.onsuccess = function(e) {
                    console.log("delete success");
                }
            }
        }

刪除所有資料

透過objectstore.clear()刪除所有的數據。

function deleteAllData(indexDbName) {
            var openRequest = indexedDB.open(indexDbName);            
            var db;
            openRequest.onsuccess = function(event) {
                db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
                var transaction = db.transaction("userinfo",&#39;readwrite&#39;);                
                var objectStore = transaction.objectStore("userinfo");
                objectStore.clear();
            }   
        }

建立索引

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

#索引名稱
索引屬性欄位名稱
索引属性值是否唯一
这里我新创建一个数据库，并且设置基于name和age的索引：

//指定主键自动增长
        function insertAutoInc(indexDbName) {
            var userinfos=[{ 
                                id:1001, 
                                name:"小李", 
                                age:24 
                            },{ 
                                id:1002, 
                                name:"老王", 
                                age:30 
                            },{ 
                                id:1003, 
                                name:"王麻子", 
                                age:26 
                            }];            
                            var openRequest = indexedDB.open(indexDbName,2);
            openRequest.onerror = function(e) {//当创建数据库失败时候的回调
                console.log("Database error: " + e.target.errorCode);
            };
            openRequest.onsuccess = function(event) {
                console.log("Database created");
                db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
                //alert("this is :"+db);
                //打开和userinfo相关的objectstore的事物
                var transaction = db.transaction("userinfo",&#39;readwrite&#39;); 
                var store=transaction.objectStore("userinfo");                
                for(var i=0;i<userinfos.length;i++){                    
                //alert("add"+userinfos[i]);
                    store.add(userinfos[i]);//将对象添加至userinfo相关的objectstore中
                }
            };
            openRequest.onupgradeneeded = function(event) {
               var db = event.target.result;                
               //在第一次创建数据库的时候，就创建userinfo相关的objectstore，以供后面添加数据时候使用
                if(!db.objectStoreNames.contains(&#39;userinfo&#39;)){                    
                //keyPath:Javascript对象，对象必须有一属性作为键值
                    var objectStore = db.createObjectStore(&#39;userinfo&#39;,{autoIncrement: true});
                    objectStore.createIndex(&#39;nameIndex&#39;,&#39;name&#39;,{unique:true});//这里假定名字不能重复，创建基于name的唯一索引
                    objectStore.createIndex(&#39;ageIndex&#39;,&#39;age&#39;,{unique:false});//创建基于age的索引
                }
            }
        }

html5使用indexdb的程式碼實例分享（圖文）

利用索引查询数据

可以利用索引快速获取数据，name的索引是唯一的没问题，但是对于age索引只会取到第一个匹配值，要想得到所有age符合条件的值就需要使用游标了

 function getDataByIndex(indexDbName) {
        var openRequest = indexedDB.open(indexDbName);        var db;
        openRequest.onerror = function(e) {//当创建数据库失败时候的回调
            console.log("Database error: " + e.target.errorCode);
        };
        openRequest.onsuccess = function(event) {
            console.log("Database created");
            db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
            var transaction = db.transaction("userinfo",&#39;readwrite&#39;);            
            var objectStore = transaction.objectStore("userinfo");            
            var nameIndex = objectStore.index("nameIndex"); //获得nameIndex索引
            nameIndex.get("小李").onsuccess = function(e) { //根据name索引获得数据成功的回调
               var userinfo = e.target.result;
               console.log("id:"+userinfo.id+"==name:"+userinfo.name+"==age:"+userinfo.age);
            }
        }
    }

html5使用indexdb的程式碼實例分享（圖文）

游标和索引结合使用

刚才我们不仅创建了一个name的唯一索引，而且还创建了一个age的索引，如果我们根据age来获取数据，有可能会有多条，由于age不唯一，所以这个时候就需要使用游标来遍历数据。这里我先插入两条age=24的记录。
html5使用indexdb的程式碼實例分享（圖文）

function getDataByAgeIndex(indexDbName) {
        var openRequest = indexedDB.open(indexDbName);        var db;
        openRequest.onerror = function(e) {//当创建数据库失败时候的回调
            console.log("Database error: " + e.target.errorCode);
        };
        openRequest.onsuccess = function(event) {
            console.log("Database created");
            db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
            var transaction = db.transaction("userinfo",&#39;readwrite&#39;);            
            var objectStore = transaction.objectStore("userinfo");            
            var nameIndex = objectStore.index("ageIndex"); //获得ageIndex索引
            var request = nameIndex.openCursor();//openCursor没有参数的时候，表示获得所有数据
            request.onsuccess = function(e) {//openCursor成功的时候回调该方法
              var cursor = e.target.result;              if (cursor) {//循环遍历cursor
                var userinfo = cursor.value;                //alert(userinfo.name);
                console.log("id:"+userinfo.id+"==name:"+userinfo.name+"==age:"+userinfo.age);
                cursor.continue();
              };
            }
        }
    }

html5使用indexdb的程式碼實例分享（圖文）
同时可以在opencursor的时候传入key range，来限制范围。
IDBKeyRange.only(value):只获取指定数据
IDBKeyRange.lowerBound(value,isOpen)：获取最小是value的数据，第二个参数用来指示是否排除value值本身，也就是数学中的是否是开区间
IDBKeyRange.upperBound(value,isOpen)：和上面类似，用于获取最大值是value的数据
IDBKeyRange.bound(value1,value2,isOpen1,isOpen2)：表示在value1和value2之间，是否包含value1和value2

这里为了演示方便，我先删除之前的数据库，重新插入更多的数据，现在所有数据如下：
html5使用indexdb的程式碼實例分享（圖文）
IDBKeyRange.only(value)
这里只需要在上面opencursor的时候将该限制条件传入即可，其他代码将保持不变，如下：

var request = nameIndex.openCursor(IDBKeyRange.only(Number(24)));

这里只根据age索引查询age==24的所有数据。
html5使用indexdb的程式碼實例分享（圖文）
IDBKeyRange.lowerBound(value,isOpen)
在使用IDBKeyRange.lowerBound(28，true)来获取年龄大于28的并且包含28岁的所有数据。

var request = nameIndex.openCursor(IDBKeyRange.lowerBound(Number(28),true));

html5使用indexdb的程式碼實例分享（圖文）

ok，今天就到这里了，希望大家喜欢。

以上是html5使用indexdb的程式碼實例分享（圖文）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

理解H5：含義和意義May 11, 2025 am 12:19 AM

H5是HTML5，是HTML的第五個版本。 HTML5提升了網頁的表現力和交互性，引入了語義化標籤、多媒體支持、離線存儲和Canvas繪圖等新特性，推動了Web技術的發展。

H5：可訪問性和網絡標準合規性May 10, 2025 am 12:21 AM

無障礙訪問和網絡標準遵循對網站至關重要。 1）無障礙訪問確保所有用戶都能平等訪問網站，2）網絡標準遵循提高網站的可訪問性和一致性，3）實現無障礙訪問需使用語義化HTML、鍵盤導航、顏色對比度和替代文本，4）遵循這些原則不僅是道德和法律要求，還能擴大用戶群體。

HTML中的H5標籤是什麼？May 09, 2025 am 12:11 AM

HTML中的H5標籤是第五級標題，用於標記較小的標題或子標題。 1)H5標籤幫助細化內容層次，提升可讀性和SEO。 2)結合CSS可定製樣式，增強視覺效果。 3)合理使用H5標籤，避免濫用，確保內容結構邏輯性。

H5代碼：Web結構的初學者指南May 08, 2025 am 12:15 AM

HTML5構建網站的方法包括：1.使用語義化標籤定義網頁結構，如、、等；2.嵌入多媒體內容，使用和標籤；3.應用表單驗證和本地存儲等高級功能。通過這些步驟，你可以創建一個結構清晰、功能豐富的現代網頁。

H5代碼結構：組織內容以實現可讀性May 07, 2025 am 12:06 AM

通過合理的H5代碼結構可以讓頁面在眾多內容中脫穎而出。 1)使用語義化標籤如、、等組織內容，使結構清晰。 2)通過CSS佈局如Flexbox或Grid控制頁面在不同設備上的呈現效果。 3)實現響應式設計，確保頁面在不同屏幕尺寸上自適應。

H5與較舊的HTML版本：比較May 06, 2025 am 12:09 AM

HTML5（H5）與舊版本HTML的主要區別包括：1）H5引入了語義化標籤，2）支持多媒體內容，3）提供離線存儲功能。 H5通過新標籤和API增強了網頁的功能和表現力，如和標籤，提高了用戶體驗和SEO效果，但需注意兼容性問題。

H5與HTML5：澄清術語和關係May 05, 2025 am 12:02 AM

H5和HTML5的區別在於：1）HTML5是網頁標準，定義結構和內容；2）H5是基於HTML5的移動網頁應用，適用於快速開發和營銷。

HTML5特徵：H5的核心May 04, 2025 am 12:05 AM

HTML5的核心特性包括語義化標籤、多媒體支持、表單增強和離線存儲與本地存儲。 1.語義化標籤如、等提高了代碼可讀性和SEO效果。 2.多媒體支持通過和標籤簡化了嵌入媒體內容的過程。 3.表單增強引入了新的輸入類型和驗證屬性，簡化了表單開發。 4.離線存儲和本地存儲通過ApplicationCache和localStorage等提高了網頁性能和用戶體驗。

See all articles