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.

JsStore can be executed in a web worker as well as directly in the main window. But it is 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 as you can do in SQL.

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

var connection = new JsStore.Instance(new Worker('jsstore.worker.js'));
async function initJsStore() {
      var schema = 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 the further query. 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 contains Id. But since it is an autoincrement column, it will be automatically generated by jsstore. 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 which contains Id 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

Lets say I want to update the product Quantity to 2000 which contains the item name - 'black'.

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

Remove data

Lets say I want to delete the product which contains the id - 10.

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

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

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