In this get started tutorial we will learn how to do crud operation in indexeddb using jsstore. You can download the example of this tutorial from - Crud implementation

Installation

JsStore can be installed using npm, cdn or scripts can be also download from jsstore github page.

IndexedDb query can be executed inside web worker & JsStore preserve this functionality. JsStore provides way to execute query inside both web worker & without web worker. But it is highly recommended to use web worker because it runs scripts in background thread. So i am going to use web worker in this tutorial.

Let's download the script from github. Go to this link - jsstore release & download files jsstore.js & jsstore.worker.js.

Now create a html page & include jsstore.js -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Crud Demo using jsstore</title>
    <script src="jsstore.js"></script>
</head>
<body>
<h4>We have included JsStore in this html code.</h4>
</body>
</html>

For more about installation check out the installation page

Creating Database

JsStore follows SQL approach to create database - A database is consist of tables and a table is consist of columns.

Lets see how to create a database schema in JsStore.

var dbName ='JsStore_Demo';
function getDbSchema() {
  var tblProduct = {
    name: 'Product',
    columns: {
        // Here "Id" is name of column 
        id:{ primaryKey: true, autoIncrement: true },
        itemName:  { notNull: true, dataType: "string" },
        price:  { notNull: true, dataType: "number" },
        quantity : { notNull: true, dataType: "number" }
    }
  };
  var db = {
      name: dbName,
      tables: [tblProduct]
  }
  return db;
}

As written in the code you can define constraints like autoincrement, datatype, default, notnull similar to what you can do in SQL.

Now we need to use the above database schema to create the database in indexeddb -

// executing jsstore inside a web worker
var connection = new JsStore.Instance(new Worker('jsstore.worker.js'));

async function initJsStore() {
      var database = getDbSchema();
      const isDbCreated = await connection.initDb(database);
      if(isDbCreated===true){
          console.log("db created");
          // here you can prefill database with some data
      }
      else {
          console.log("db opened");
      }
}

In the above code -

  • Line 1 - Storing the JsStore connection instance in a variable 'connection'.
  • Line 2 - Declared a function initJsStore which will create the database using provided schema in IndexedDB.


Note :- The connection object will be used to execute future queries so we dont need to initiate it multiple times.

Inserting data

JsStore provides insert API for inserting data.

Let's say we have below value -

var value = {
    itemName: 'Blue Jeans',
    price: 2000,
    quantity: 1000
}

One thing to notice is that value does not contain the "id" property. Since it is an autoincrement column, it will be automatically generated by jsstore before inserting data and added with supplied data.

Now, let's insert this value into db -

var noOfDataInserted = await connection.insert({
    into: 'Product',
    values: [value]
});
if (noOfDataInserted > 0) {
    alert('successfully added');
}

Read data

JsStore provides select API for reading data. Lets say I want to retrieve the record with Id of 5.

// results will be array of objects
var results = await connection.select({
    from: 'Product',
    where: {
        id: 5
    }
});
alert(results.length + 'record found');

You can also perform operations like- "IN", "LIKE", "BETWEEN", "LIMIT" etc.

Updating data

JsStore provides update API for reading data.

Lets say We want to update Quantity to 2000 on the products with Item Name containing the substring 'black'.

var rowsUpdated = await connection.update({ 
    in: 'Product',
    where: {
        itemName: {
            like: '%black%'
        }
    },
    set: {
        quantity: 2000
    }
});
alert(rowsUpdated + ' rows updated');

Remove data

JsStore provides remove API for reading data.

Lets say I want to delete the product with Id of 10.

var rowsDeleted = await connection.remove({
    from: 'Product',
    where: {
        id: 10
    }
});
alert(rowsDeleted + ' record deleted');

We hope you have understood this article. Now lets make something awesome.

* Check it out some tutorial & examples for more understanding -