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 按钮。如果单击它,将删除此数据库。