HTML - IndexedDB：您的個人數據庫在瀏覽器中

Hello, 未來的網頁開發者們！今天，我們將要深入IndexedDB這個令人興奮的世界。作為你們親切的鄰居計算機老師，我將指導你們進行這次旅行，即使你們從未寫過一行代碼。所以，戴上你們的虛擬安全帽，讓我們開始建造吧！

HTML - IndexedDB

什麼是IndexedDB？

IndexedDB就像一個迷你數據庫，它就在你的網頁瀏覽器中。想像一下，在你的電腦裡有一個小巧的文件櫃，它可以為你的網頁應用程序存儲和組織各種各樣的信息。酷炫吧？

為什麼使用IndexedDB？

你可能會想，“我們為什麼需要另一種存儲數據的方式？”讓我告訴你一個小故事。在很久以前，我們依賴cookies和本地存儲來在瀏覽器中保存數據。但它們就像試圖將一頭大象塞進火柴盒裡一樣——有限且不夠靈活。

以下為什麼IndexedDB是瀏覽器存儲的超級英雄：

特性	描述
存儲容量	可以存儲比cookies或本地存儲更多的數據
數據類型	支持各種數據類型，包括文件和blob
索引	允許快速搜索你的數據
交易	使用基於交易的操作確保數據完整性
異步	在處理數據時不會凍結你的應用程序

開始使用IndexedDB

讓我們捋起袖子，開始寫一些真實的代碼。別擔心，如果一開始看起來令人生畏——我們會一步步分解它。

let db;
const request = indexedDB.open("MyFirstDatabase", 1);

request.onerror = function(event) {
console.error("數據庫錯誤: " + event.target.error);
};

request.onsuccess = function(event) {
db = event.target.result;
console.log("數據庫成功打開");
};

request.onupgradeneeded = function(event) {
db = event.target.result;
const objectStore = db.createObjectStore("students", { keyPath: "id" });
console.log("物件存儲已創建");
};

哇！這有很多要接受的，不是嗎？讓我們分解一下：

我們從聲明一個變量db開始，用於持有我們的數據庫連接。
我們使用indexedDB.open()來打開（或創建）一個名為"MyFirstDatabase"的數據庫。
我們設置了三個事件處理程序：

onerror：如果出了問題，這會運行。
onsuccess：當數據庫成功打開時，這會運行。
onupgradeneeded：當數據庫被創建或升級時，這會運行。

把onupgradeneeded想像成數據庫建築師。這是我們設計數據庫結構的地方。

為IndexedDB添加數據

現在，我們已經設置好了數據庫，讓我們向其中添加一些數據。想像我們正在創建一個學生管理系統。

function addStudent(student) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.add(student);

request.onerror = function(event) {
console.log("添加學生時出錯: " + event.target.error);
};

request.onsuccess = function(event) {
console.log("學生添加成功");
};
}

// 使用方法
addStudent({ id: 1, name: "Alice", grade: "A" });
addStudent({ id: 2, name: "Bob", grade: "B" });

這裡發生了什麼：

我們創建一個交易——想像它是我們數據的安全隧道。
我們獲取物件存儲（就像傳統數據庫中的表）。
我們使用add()來插入我們的學生數據。
我們設置成功和錯誤處理程序以確定它是否有效。

從IndexedDB檢索數據

存儲的數據如果無法檢索有什麼用呢？讓我們获取我們的學生數據：

function getStudent(id) {
const transaction = db.transaction(["students"]);
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("获取學生時出錯: " + event.target.error);
};

request.onsuccess = function(event) {
if (request.result) {
console.log("找到學生:", request.result);
} else {
console.log("學生未找到");
}
};
}

// 使用方法
getStudent(1);

這個函數就像圖書管理員為你取書：

我們開始一個只讀交易（我們不會改變任何東西）。
我們使用get()來根據他們的ID獲取學生。
如果我們找到了學生，我們記錄他們的詳細信息；否則，我們說他們未找到。

在IndexedDB中更新數據

學生會進步，成績會變化。讓我們更新我們的記錄：

function updateStudent(id, newGrade) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.get(id);

request.onerror = function(event) {
console.log("获取更新學生時出錯: " + event.target.error);
};

request.onsuccess = function(event) {
const data = event.target.result;
data.grade = newGrade;

const updateRequest = objectStore.put(data);

updateRequest.onerror = function(event) {
console.log("更新學生時出錯: " + event.target.error);
};

updateRequest.onsuccess = function(event) {
console.log("學生更新成功");
};
};
}

// 使用方法
updateStudent(1, "A+");

這個函數就像老師更新成績簿：

我們获取學生的當前數據。
我們修改成績。
我們使用put()將更新的數據保存回數據庫。

從IndexedDB刪除數據

有時我們需要刪除數據。讓我們添加一個函數來刪除一個學生：

function deleteStudent(id) {
const transaction = db.transaction(["students"], "readwrite");
const objectStore = transaction.objectStore("students");
const request = objectStore.delete(id);

request.onerror = function(event) {
console.log("刪除學生時出錯: " + event.target.error);
};

request.onsuccess = function(event) {
console.log("學生刪除成功");
};
}

// 使用方法
deleteStudent(2);

這就像從我們的學生記錄中擦除一條記錄：

我們開始一個"讀寫"交易，因為我們正在修改數據。
我們使用delete()方法來根據他們的ID刪除學生。
我們處理成功和錯誤情況以確定它是否有效。

結論

恭喜你們！你們已經邁出了進入IndexedDB世界的第一步。我們已經介紹了創建數據庫、添加、檢索、更新和刪除數據。這些是你們在使用IndexedDB時會使用的基礎操作。

記住，熟能生巧。試著使用IndexedDB創建你自己的小項目。也許是一個待辦事項應用程序或個人日記。你越多地與它交互，你就會越熟悉它。

IndexedDB可能一開始看起來很複雜，但它是一個強大的工具，可以將你的網頁應用程序提升到新的水平。它就像一種超能力——在瀏覽器中存儲和管理大量數據的能力。

繼續編程，保持好奇心，並在過程中享受樂趣！誰知道呢？下一個大網頁應用程序可能就在你的指尖。

Credits: Image by storyset