IndexedDB - 物件儲存

物件儲存是 IndexedDB 的資料儲存位置，資料儲存於此。一個數據庫可以有多個物件儲存。可以將其視為 RDBMS 中的表，我們在其中根據要儲存的資料型別儲存資料。

為了確保資料庫完整性，只能使用回撥函式idb.open()建立和刪除物件儲存。它包含一個名為createObjectStore()的方法，用於建立物件儲存。

建立物件儲存

可以使用createObjectStore()方法建立物件儲存。以下是此方法的語法：

IDBDatabase.createObjectStore(name);
Or,
IDBDatabase.createObjectStore(name, options);

其中，

name 是物件儲存的名稱。
options 物件允許我們定義各種配置屬性。

示例

以下示例建立一個新資料庫並在其中建立一個物件儲存：

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Creating Object Store</title>
</head>
<body>
   <script>
      var request = indexedDB.open("myDatabase", 2);
      request.onupgradeneeded = event => {
         var db = event.target.result;
         var objectStore = db.createObjectStore("customers");
         document.write("Object store Created Successfully...");
      };
   </script>
</body>
</html>

輸出

執行上述程式後，瀏覽器上會顯示以下訊息。

Object store Created Successfully...

驗證

如果上述程式成功執行，展開“myDatabase”，您可以看到新建立的物件儲存。

定義主鍵

與 RDBMS 類似，我們需要主鍵來唯一地定義物件儲存中的某些資料。這可以透過使用鍵路徑或鍵生成器兩種方式完成。

鍵路徑和鍵生成器

鍵路徑是一個始終存在且包含唯一值的屬性。例如，我們可以選擇一個唯一值，例如電子郵件地址。

鍵生成器為新增到物件儲存的每個物件建立一個唯一值。預設情況下，如果我們不提及，鍵生成器就會出現。例如，自動遞增。

語法

以下是建立物件儲存鍵路徑的語法。

var objectStore = db.createObjectStore("ObjectStoreName", { keyPath: "primary key, autoincrement/autoDecrement : true" });

示例

在下面的示例中，我們使用 JavaScript 為物件儲存建立鍵路徑：

<!DOCTYPE html>
<html lang="en">
<head>
   <title>keypath</title>
</head>
<body>
   <script>
      var request = indexedDB.open("myDtabase", 2);
      request.onupgradeneeded = event => {
         var db = event.target.result;
         var objectStore = db.createObjectStore("customers",{keyPath:"id", autoIncrement:true});
         document.write("Object store Created Successfully...");
      };
   </script>
</body>
</html>

輸出

執行上述示例後，它將在瀏覽器上顯示以下文字：

Object store Created Successfully...

驗證

如果上述程式成功執行，展開“myDatabase”，您可以看到新建立的物件儲存，如果單擊它，您可以觀察到為“id”建立了鍵路徑。

建立新的物件儲存時，它們會像上面那樣顯示在 IndexedDB 資料夾中。

您可以同時使用鍵路徑和鍵生成器。如果資料始終唯一，我們可以使用鍵路徑；如果值發生變化，可以使用鍵生成器；如果要為每個值更改值，但又想提供唯一表示儲存的值，則可以使用兩者。

定義索引

索引是一種物件儲存。它們用於從由指定屬性儲存的引用物件中檢索資料。索引使用指定的屬性作為其鍵路徑，而不是引用儲存的主鍵。

要建立索引，需要在物件儲存例項上呼叫createIndex()方法。

語法

以下是createIndex()方法的語法：

var myIDBIndex = objectStore.createIndex(indexName, keyPath);
var myIDBIndex = objectStore.createIndex(indexName, keyPath, Parameters);

其中，

indexName 是建立的索引的名稱。
Keypath 是建立物件儲存時的主要定義
最後一個引數的值可以是unique 或 multi-entry
- 如果您“傳遞 unique: true”。索引不允許單個鍵出現重複值。
- 如果您傳遞“multi-entry: true”。當 keyPath 解析為陣列時，索引將為每個陣列元素新增一個條目。如果為 false，它將新增一個包含陣列的單個條目。

示例

以下 JavaScript 示例演示如何建立索引。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>OPENING A DATABASE</title>
</head>
<body>
   <script>
      const dbName = "myDB";
      const studentdata = [
         {name : "jason" , rollno: "160218737028" , branch : "IT"},
         {name : "lokesh" , rollno: "160218735020" , branch : "CSE"},
         {name : "tarun" , rollno: "160218733057" , branch : "EEE"},
         {name : "pranith" , rollno: "160218737029" , branch : "IT"}
      ];
      var request = indexedDB.open("myDB", 2);
      request.onupgradeneeded = event => {
         var db = event.target.result;
         var objectStore = db.createObjectStore("student",{ keyPath :"rollno" });
         objectStore.createIndex("name", "name", { unique: false });
         objectStore.createIndex("branch", "branch", { unique: false });
         objectStore.transaction.oncomplete = event => {
            var objectStore = db.transaction("student", "readwrite").objectStore("student");
            studentdata.forEach(function(student) {
               objectStore.add(student);
            });
         };
      };
   </script>
</body>
</html>

輸出

如果您去驗證 IndexedDB 資料庫myDB 的內容並展開它，您可以觀察到建立的表如下：

如果單擊名稱和學生值，您可以觀察到索引值如下：

名稱索引

#	鍵（鍵路徑：“name”）	主鍵（鍵路徑：“rollno”）	值
0	“jason”	"160218737028"	{name: 'jason', rollno: '160218737028', branch 1. branch: "IT" 2. name: "jason" 3. rollno: "160218737028"
1	“lokesh”	"160218735020"	{name: 'lokesh', rollno: '160218735020', branch: 'CSE'} 1. branch: "CSE" 2. name: "lokesh" 3. rollno: "160218735020"
2	“pranith”	"160218737029"	{name: 'pranith', rollno: '160218737029', branch: 'IT'} 1. branch: "IT" 2. name: "pranith" 3. rollno: "160218737029"
3	“tarun”	"160218733057"	{name: 'tarun', rollno: '160218733057', branch: 'EEE'} 1. branch: "EEE" 2. name: "tarun" 3. rollno: "160218733057"

分支索引

#	鍵（鍵路徑：“branch”）	主鍵（鍵路徑：“rollno”）	值
0	“CSE”	"160218735020"	{name:'lokesh', rollno:'160218735020', branch: 'CSE'} 1. branch: "CSE" 2. name: "lokesh" 3. rollno: "160218735020"
1	“EEE”	"160218733057"	{name:'tarun', rollno: '160218733057', branch: 'EEE'} 1. branch: "EEE" 2. name: "tarun" 3. rollno: "160218733057"
2	“IT”	"160218737028"	{name:'jason', rollno: '160218737028', branch: 'IT'} 1. branch: "IT" 2. name: "jason" 3. rollno: "160218737028"
3	“IT”	"160218737029"	{name:'pranith', rollno: '160218737029', branch: 'IT'} 1. branch: "IT" 2. name: "pranith" 3. rollno: "160218737029"

刪除物件儲存

物件儲存類似於資料庫中的表，當不需要表時，我們會刪除它。同樣，如果不再使用物件儲存，您可以刪除它。要刪除物件儲存，需要呼叫deleteObjectStore()函式。

語法

以下是deleteObjectStore()函式的語法：

db.deleteObjectStore("store_name");

其中，store_name 是您需要刪除的物件儲存的名稱。

示例

讓我們來看一個 JavaScript 示例，該示例刪除不再需要的物件儲存：

<!DOCTYPE html>
<html lang="en">
<head>
   <title>OPENING A DATABASE</title>
</head>
<body>
   <script>
      const dbName = "Database";
      var request = indexedDB.open("Database", 2);
      request.onupgradeneeded = event => {
         var db = event.target.result;
         var objectStore = db.createObjectStore("student",{ keyPath :"rollno" } );
         var objstore = db.createObjectStore("college",{autoIncrement : true});
         db.deleteObjectStore("college");
      };
   </script>
</body>
</html>

輸出

在瀏覽器中刪除 IndexedDB 資料夾中的物件儲存之前和之後。

Database
   College − object store
   Student − object store
      Name − index
      Branch − index

Database
   Student − object store
      Name − index
      Branch − index

列印頁面