Indexeddb 简明教程
IndexedDB - Connection
数据库是一个有序的、结构化数据集合，这些数据存储在计算机系统中。为了对数据执行操作，我们需要连接到数据库。在本章中，我们将讨论如何创建/连接到数据库、打开数据库和删除数据库。
Creating a database - 你可以使用 open() 函数在 IndexedDB 中创建一个数据库。以下是此函数的语法。
let openRequest = indexedDB.open(name, version);其中，
-
name 是你要创建的数据库的名称。
-
version 是要创建的数据库的版本。此参数的默认值为 1。如果你省略此值，则版本将被视作 1。
你要传递给此函数的版本值不应低于当前版本（IndexedDB 的版本）。如果成功创建了数据库，则此函数返回 1；如果创建失败，则返货 0。
Example
以下是 IndexedDB 中创建数据库的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Indexed db</title>
</head>
<body>
<script>
//Creating a database
const request = indexedDB.open("myDatabase", 1);
if(indexedDB){
document.write("Database Created......");
}
</script>
</body>
</html>Verification
因为 IndexedDB 是浏览器内置的数据库，所以在浏览器中就能看到创建的数据库。
右键点击生成页面，点击“检查元素”并选取“应用标签”。如果展开此选项卡，您可以在其中看到 IndexedDB 数据库，您可以看到创建的数据库文件，如下所示：
Generating Handlers
event 是在 HTML 元素上执行的操作。我们可以使用 JavaScript 处理这些事件。从现在开始，我们将使用 JavaScript 处理程序（为了让此更清楚）。
如果请求成功，我们将使用 onsuccess 事件。
request.onerror = event => {
// Do something (ex: document.write("error");
};如果请求失败，我们将使用 onerror 事件。
request.onsuccess = event => {
// Do something (ex : document.write("success");
};当创建一个数据库或增加现有数据库的版本号时，我们将使用 onupgradeneeded 事件。
request.onupgradeneeded = event => {
var db = event.target.result;
};Example
以下示例显示消息“ database creation success ”。如果数据库创建成功。在这里，我们使用 onsuccess 和 onerror 处理程序来显示这些消息。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Handlers</title>
</head>
<body>
<script>
const request = indexedDB.open("DATABASE", 1);
request.onsuccess = function (){
document.write("Database created successfully...")
}
request.onerror = function(){
document.write("database creation error");
}
request.onupgradeneeded = function(event){
var db = event.target.result;
}
</script>
</body>
</html>Connecting to an existing database
为了与 IndexedDB 交互，我们使用 JavaScript。我们用 JavaScript 撰写的代码并不会直接与数据库交互。我们需要使用连接对象连接到数据库，以操作数据库的对象。
直接打开数据库会创建一个连接。一个数据库可以有多个连接。当创建连接之初，它处于打开状态。
您可以使用 open() 函数连接到 IndexedDB 数据库（我们用来创建数据库）。
Example
下面给出了一个使用带有连接对象的 JavaScript 示例，它与现有数据库交互：
<!DOCTYPE html>
<html lang="en">
<head>
<title>OPENING A DATABASE</title>
</head>
<body>
<script>
const request = indexedDB.open("DATABASE", 1);
request.onsuccess = function (){
document.write("<br> Database created successfully")
}
const requestone = indexedDB.open("Database1",2);
requestone.onsuccess = function(){
document.write("<br> Database created successfully");
}
const requesttwo = indexedDB.open("DATABASE",1);
requesttwo.onsuccess = function(){
document.write("<br> Database opened successfully");
}
</script>
</body>
</html>Another way to check databases in the browser
除了检查元素之外，还有另一种方法可以在浏览器中检查 IndexedDB 数据库。
在右上角将有一个“自定义和控制”按钮，点击它。
在列表中选择 More tools 选项，然后选择 Developer tools 。
在下一页中选择“应用程序”选项卡，您可以在其中看到 IndexedDB 数据库。
Deleting a database
如果有我们不需要的或没有必要占用空间的任何数据库，我们可以将其删除。要删除数据库，我们可以使用 deleteDatabase() 函数。
以下是 deleteDatabase() 函数的语法 −
let deleteRequest = indexedDB.deleteDatabase(name)这里， name 参数是我们想要删除的数据库的名称。
Example
以下示例创建了一个名为 TestDatabase 的数据库并使用 deleteDatabase() 函数将其删除。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Indexed db</title>
</head>
<body>
<script>
const request = indexedDB.open("TestDatabase", 1);
request.onsuccess = function () {
document.write("Database Created Successfully");
};
var req = indexedDB.deleteDatabase("TestDatabase");
req.onsuccess = function () {
document.write("Database Deleted Successfully");
};
req.onerror = function () {
document.write("Couldn't delete the database");
};
</script>
</body>
</html>Deleting a database Directly From the browser
创建数据库后，您可以直接从浏览器中删除它。要执行此操作，请按照以下步骤操作 −
Step 1 − 使用以下方式之一在浏览器中打开可以看到 IndexedDB 数据库（存储）的页面
-
Inspect option − 鼠标右键单击 → 检查 → 应用程序，或
-
Developer tools − 自定义和控制选项 → 更多工具 → 开发者工具 → 应用程序
Step 2 − 如果您展开 IndexedDB 存储，可以看到如下图所示的已创建数据库列表。
Step 3 − 单击要删除的数据库。在右侧，您将找到 Delete Database 按钮。如果单击它，将删除此数据库。
