Indexeddb 简明教程
IndexedDB - Object Stores
Object stores 是 IndexedDB 的数据存储。这是存储数据的地方。数据库可以包含多个对象存储。可以将它们视为 RDBMS 中的表，在其中我们根据想要存储的数据类型存储数据。
为了确保数据库完整性，只能使用回调函数 idb.open() 来创建和删除对象存储。它包含一个名为 createObjectStore() 的方法，用于创建对象存储。
Creating object Stores
可以使用 createObjectStore() 方法来创建对象存储。以下是此方法的语法 −
IDBDatabase.createObjectStore(name);
Or,
IDBDatabase.createObjectStore(name, options);其中，
-
name 是对象存储的名称。
-
options 对象允许我们定义各种配置属性。
Example
以下示例创建了一个新数据库并在其中创建了一个对象存储 −
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creating Object Store</title>
</head>
<body>
<script>
var request = indexedDB.open("myDatabase", 2);
request.onupgradeneeded = event => {
var db = event.target.result;
var objectStore = db.createObjectStore("customers");
document.write("Object store Created Successfully...");
};
</script>
</body>
</html>
Defining primary keys
类似于 RDBMS，我们需要主键来唯一地定义对象存储中的某些数据。可以使用密钥路径或密钥生成器以 2 种方式来实现这一点。
Keypath and Key generator
key path 是总是存在的属性，并且包含惟一的值。我们可以选择一个惟一的值，如电子邮件地址。
key generator 为添加到对象存储中的每个对象创建一个惟一的值。默认情况下，如果我们不提及密钥生成器则会进入该图像。例如，自动递增。
Syntax
以下是对象存储上创建密钥路径的语法。
var objectStore = db.createObjectStore("ObjectStoreName", { keyPath: "primary key, autoincrement/autoDecrement : true" });Example
在下面给出的示例中，我们正在使用 JavaScript 创建到对象存储的密钥路径 −
<!DOCTYPE html>
<html lang="en">
<head>
<title>keypath</title>
</head>
<body>
<script>
var request = indexedDB.open("myDtabase", 2);
request.onupgradeneeded = event => {
var db = event.target.result;
var objectStore = db.createObjectStore("customers",{keyPath:"id", autoIncrement:true});
document.write("Object store Created Successfully...");
};
</script>
</body>
</html>Verification
如果上述程序执行成功，当您展开 “myDatabase” 时，您可以看到新创建的对象存储，如果单击它，则可以看到为 “id” 创建了密钥路径。
创建新的对象存储时，它们会像上面一样在 IndexedDB 文件夹中提及。
你可以同时使用键路径和键生成器。如果数据总能是唯一的，我们可以使用一个 keypath，否则如果值更改，你可以使用一个键生成器，如果你想为每一个值更改值，但希望提供唯一地表示存储的值，我们可以两个都用。
Defining Indexes
索引是一种对象存储。它们用于从存储在指定属性中的引用对象检索数据。索引使用指定属性作为其键路径，而不是引用存储的主键。
要创建索引，你需要在 createIndex() 实例上调用 object store 方法。
Syntax
下面是 createIndex() 方法的语法 −
var myIDBIndex = objectStore.createIndex(indexName, keyPath);
var myIDBIndex = objectStore.createIndex(indexName, keyPath, Parameters);其中，
-
indexName 是创建的索引的名称。
-
Keypath 是在创建对象存储时主定义
-
最后一个参数的值可以是 unique 或 multi-entry ，以防您 “pass unique: true” 。索引不会允许单个键重复值。如果你通过 “multi-entry: true” 。当 keyPath 解析为数组时，索引会为每个数组元素添加一个条目。如果为 false，它将添加包含数组的一个单一条目。
Example
以下 JavaScript 示例演示如何创建索引。
<!DOCTYPE html>
<html lang="en">
<head>
<title>OPENING A DATABASE</title>
</head>
<body>
<script>
const dbName = "myDB";
const studentdata = [
{name : "jason" , rollno: "160218737028" , branch : "IT"},
{name : "lokesh" , rollno: "160218735020" , branch : "CSE"},
{name : "tarun" , rollno: "160218733057" , branch : "EEE"},
{name : "pranith" , rollno: "160218737029" , branch : "IT"}
];
var request = indexedDB.open("myDB", 2);
request.onupgradeneeded = event => {
var db = event.target.result;
var objectStore = db.createObjectStore("student",{ keyPath :"rollno" });
objectStore.createIndex("name", "name", { unique: false });
objectStore.createIndex("branch", "branch", { unique: false });
objectStore.transaction.oncomplete = event => {
var objectStore = db.transaction("student", "readwrite").objectStore("student");
studentdata.forEach(function(student) {
objectStore.add(student);
});
};
};
</script>
</body>
</html>Output
如果您去验证 IndexedDB 数据库 myDB 的内容并展开它，您将观察被创建的表如下 −
如果您点击名称和学生值，您将观察索引值如下 −
Name index
# |
Key(Key path:"name") |
Primary key (Key path:"rollno") |
Value |
0 |
"jason" |
"160218737028" |
{name: 'jason', rollno: '160218737028', branch:1. branch: "IT"2. name: "jason"3. rollno: "160218737028" |
1 |
"lokesh" |
"160218735020" |
{name: 'lokesh', rollno: '160218735020', branch: 'CSE'}1. branch: "CSE"2. name: "lokesh"3. rollno: "160218735020" |
2 |
"pranith" |
"160218737029" |
{name: 'pranith', rollno: '160218737029', branch: 'IT'}1. branch: "IT"2. name: "pranith"3. rollno: "160218737029" |
3 |
"tarun" |
"160218733057" |
{name: 'tarun', rollno: '160218733057', branch: 'EEE'}1. branch: "EEE"2. name: "tarun"3. rollno: "160218733057" |
Branch Index
# |
Key(Key path:"branch") |
Primary key (Key path:"rollno") |
Value |
0 |
"CSE" |
"160218735020" |
{name:'lokesh', rollno:'160218735020', branch: 'CSE'}1. branch: "CSE"2. name: "lokesh"3. rollno: "160218735020" |
1 |
"EEE" |
"160218733057" |
{name:'tarun', rollno: '160218733057', branch: 'EEE'}1. branch: "EEE"2. name: "tarun"3. rollno: "160218733057" |
2 |
"IT" |
"160218737028" |
{name:'jason', rollno: '160218737028', branch: 'IT'}1. 专业：\"IT\"2. 姓名：\"jason\"3. 学号：\"160218737028\" |
3 |
"IT" |
"160218737029" |
{name:'pranith', rollno: '160218737029', branch: 'IT'}1. 专业：\"IT\"2. 姓名：\"pranith\"3. 学号：\"160218737029\" |
Deleting Object Store
对象存储与数据库中的表类似，当不需要该表时，我们可以删除表。类似地，当不再使用对象存储时，您可以删除该对象存储。要删除对象存储，您需要调用 deleteObjectStore() 函数。
Syntax
以下是 deleteObjectStore() 函数的语法 −
db.deleteObjectStore("store_name");其中，store_name是您需要删除的对象存储的名称。
Example
让我们看一个删除不再必需的对象存储的 JavaScript 示例 −
<!DOCTYPE html>
<html lang="en">
<head>
<title>OPENING A DATABASE</title>
</head>
<body>
<script>
const dbName = "Database";
var request = indexedDB.open("Database", 2);
request.onupgradeneeded = event => {
var db = event.target.result;
var objectStore = db.createObjectStore("student",{ keyPath :"rollno" } );
var objstore = db.createObjectStore("college",{autoIncrement : true});
db.deleteObjectStore("college");
};
</script>
</body>
</html>