Javascript中的IndexedDB是一種在客戶端存儲數據的技術，一個基于鍵值對的數據庫，它允許我們在瀏覽器上存儲大量的數據并離線訪問，而且支持事務。在本篇文章中，我們將學習如何通過使用Javascript中的IndexedDB在客戶端存儲數據。

為了使用IndexedDB，我們需要創建一個IDBDatabase對象并打開一個新的IndexedDB數據庫。下面是使用IndexedDB創建客戶端存儲的代碼示例：

let db;
const request = window.indexedDB.open('myDatabase', 1);
request.onerror = function(event) {
console.log('Database error:' + event.target.errorCode);
};
request.onsuccess = function(event) {
db = event.target.result;
};

上面的代碼將打開一個名為“myDatabase”的IDBDatabase數據庫并返回一個db變量來引用這個數據庫。如果數據庫不存在則會自動創建一個新的。

接下來，我們需要創建一個Object Store（對象倉庫），類似于一張表格，可以在其中存儲對象。下面是創建對象倉庫的代碼示例：

const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false });

上面的代碼將創建一個名為“customers”的對象倉庫，并將“id”屬性設置為鍵值。我們還可以在對象倉庫上創建一個名為“name”的索引。

現在，我們可以將數據對象存儲到對象倉庫中。下面是將數據對象存儲到IndexedDB中的代碼示例：

const customerData = [
{ id: '001', name: 'Alice', email: 'alice@example.com' },
{ id: '002', name: 'Bob', email: 'bob@example.com' }
];
const transaction = db.transaction(['customers'], 'readwrite');
transaction.oncomplete = function(event) {
console.log('Transaction completed.');
};
transaction.onerror = function(event) {
console.log('Transaction error:' + event.target.errorCode);
};
const objectStore = transaction.objectStore('customers');
customerData.forEach(function(customer) {
const request = objectStore.add(customer);
request.onsuccess = function(event) {
console.log('Data added successfully.');
};
});

上面的代碼將以下數據對象保存到“customers”對象倉庫中：

[
{ id: '001', name: 'Alice', email: 'alice@example.com' },
{ id: '002', name: 'Bob', email: 'bob@example.com' }
]

注意，在存儲數據之前，我們需要創建一個事務（transaction）對象，并設置其讀寫模式。在事務完成時，我們可以在oncomplete回調中執行任何必要的操作，例如消除或提交事務。此外，我們還需要為每個插入操作創建一個請求對象，并且將成功回調函數添加到該請求對象的onsuccess事件上。

最后，我們可以查詢和檢索存儲在IndexedDB中的數據。下面是從“customers”對象倉庫中檢索數據的代碼示例：

const transaction = db.transaction(['customers']);
const objectStore = transaction.objectStore('customers');
const index = objectStore.index('name');
const request = index.get('Alice');
request.onsuccess = function(event) {
console.log(event.target.result);
};

上面的代碼將從“customers”對象倉庫中檢索名為“Alice”的對象，并將其結果輸出到控制臺上。

總的來說，IndexedDB是一個非常有用的技術，可以在瀏覽器上方便地存儲和檢索數據，而不需要一個后端服務器。但需要記住，IndexedDB是一個強大的數據庫系統，因此在使用它時應該小心并確保學習IndexedDB相關問題。