IndexedDB – Object Stores
”; Previous Next
Object stores are the data storage of IndexedDB. It is where data is stored. A database may have multiple object stores. Think of them as tables in RDBMS where we store data based on the type of data we want to store.
To ensure database integrity, object stores can only be created and removed using the callback function idb.open(). It contains a method named createObjectStore() which is used to create an object-store.
Creating object Stores
You can create an object store using the createObjectStore() method. Following is the syntax of this method −
IDBDatabase.createObjectStore(name);
Or,
IDBDatabase.createObjectStore(name, options);
Where,
The name is the name of the object store.
The options object can let us define various configuration properties.
Example
Following example creates a new database and creates a object store in it −
<!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>
Output
On executing, the above program displays the following message on the browser.
Object store Created Successfully…
Verification
If the above program is executed successfully if you expand “myDatabase” you can see the newly created object-store.
Defining primary keys
Similar to RDBMS we need primary keys to uniquely define some data in an object store. It can be done in 2 ways using a key path or a key generator.
Keypath and Key generator
A key path is a property that always exists and contains a unique value. We can choose a unique value such as an email address for example.
A key generator creates a unique value for every object added to the object store. By default, if we don”t mention a key generator comes into the picture. Ex, auto-increment.
Syntax
Following is the syntax ro create a keypath on an object store.
var objectStore = db.createObjectStore(“ObjectStoreName”, { keyPath: “primary key, autoincrement/autoDecrement : true” });
Example
In the example given below, we are creating a keypath to an object store using 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>
Output
On executing the above example, it will display the following text on the browser −
Object store Created Successfully…
Verification
If the above program is executed successfully if you expand “myDatabase” you can see the newly created object store, if you click on it you can observe that the keypath is created for “id”.
When new object stores are created they are mentioned in the IndexedDB folders like above.
You can use both a keypath and a key generator. If the data is always unique we can use a keypath else if the value changes you can use a key generator, if you want to change the values for every value but want to give a value that uniquely represents the store we can use both.
Defining Indexes
Indexes are a kind of object-store. They are used to retrieve data from the reference object, stored by a specified property. An index uses the specified property as its key path instead of the reference store”s primary key.
To create an index, you need to call the createIndex() method on an object store instance.
Syntax
Following is the syntax of the createIndex() method −
var myIDBIndex = objectStore.createIndex(indexName, keyPath);
var myIDBIndex = objectStore.createIndex(indexName, keyPath, Parameters);
Where,
An indexName is the name of the index created.
Keypath is the primary definition while creating an object store
The value of the last parameter can be unique or multi-entry
In case you “pass unique: true”. The index will not allow duplicate values for a single key.
If you pass “multi-entry: true”. The index will add an entry for each array element when the keyPath resolves to an Array. If false, it will add one single entry containing the Array.
Example
The following JavaScript example demonstrates how to create indexes.
<!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
If you go and verify the contents of the IndexedDB database myDB and expand it youj can observe the created table as −
If you click on the name and student values you can observe the index values as −
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”