前端indexDB使用指南

IndexedDB 是一種在浏覽器中存儲大量結構化資料的 Web API。它提供了一種高效地存儲和檢索資料的方式，特别适用于離線應用程式或需要處理大量資料的場景。

IndexedDB 的工作原理類似于關系型資料庫，但是它是在用戶端中運作的，并且使用對象存儲而不是表。與傳統的資料庫不同，IndexedDB 使用的是鍵值對的方式來存儲資料。

當使用 IndexedDB 編寫前端代碼時，你需要遵循以下步驟：

1. 打開資料庫連接配接：

```javascript

var request = indexedDB.open('myDatabase', 1);

request.onerror = function(event) {

console.log("Database error: " + event.target.errorCode);

};

request.onupgradeneeded = function(event) {

var db = event.target.result;

var objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });

// 可以建立索引等操作

};

request.onsuccess = function(event) {

var db = event.target.result;

// 可以在這裡執行其他操作

};

```

2. 在資料庫中建立對象存儲空間：

```javascript

var transaction = db.transaction(["myObjectStore"], "readwrite");

var objectStore = transaction.objectStore("myObjectStore");

var data = { id: 1, name: "John Doe", age: 30 };

var request = objectStore.add(data);

request.onsuccess = function(event) {

console.log("Data added to object store");

};

request.onerror = function(event) {

console.log("Error adding data to object store");

};

```

3. 讀取資料：

```javascript

var transaction = db.transaction(["myObjectStore"], "readonly");

var objectStore = transaction.objectStore("myObjectStore");

var request = objectStore.get(1);

request.onsuccess = function(event) {

var data = event.target.result;

console.log("Name: " + data.name + ", Age: " + data.age);

};

request.onerror = function(event) {

console.log("Error retrieving data");

};

```

4. 更新資料：

```javascript

var transaction = db.transaction(["myObjectStore"], "readwrite");

var objectStore = transaction.objectStore("myObjectStore");

var request = objectStore.get(1);

request.onsuccess = function(event) {

var data = event.target.result;

data.age = 31;

var updateRequest = objectStore.put(data);

updateRequest.onsuccess = function(event) {

console.log("Data updated");

};

updateRequest.onerror = function(event) {

console.log("Error updating data");

};

};

request.onerror = function(event) {

console.log("Error retrieving data");

};

```

5. 删除資料：

```javascript

var transaction = db.transaction(["myObjectStore"], "readwrite");

var objectStore = transaction.objectStore("myObjectStore");

var request = objectStore.delete(1);

request.onsuccess = function(event) {

console.log("Data deleted");

};

request.onerror = function(event) {

console.log("Error deleting data");

};

```

以上隻是 IndexedDB 的一些基本操作示例，你可以根據具體需求進行擴充和調整。請記住，IndexedDB 是異步的，是以你需要适當處理成功和錯誤的回調函數。