Skip to main content

Get started

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

Introduction​

JsStore is a wrapper for IndexedDB. It provides simple SQL like api which is easy to learn & use.

IndexedDb query can be executed inside web worker & JsStore preserve this functionality by providing a seperate worker file.

So query can be executed both way - inside web worker or without web worker. But it is strongly recommended to use web worker because it runs scripts in background thread.

Installation​

There are various ways to install JsStore. For more about installation check out the installation page

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>

Connection​

A connection allow you to query database. It can be initialized with web worker file or without web worker file.

When initialized with worker file - jsstore create a web worker and query is executed inside web worker. For more info, check out the Connection page

var connection = new JsStore.Connection(new Worker('jsstore.worker.js'));

Creating Database​

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

Lets see an example - 

var dbName ='JsStore_Demo';
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 database = {
    name: dbName,
    tables: [tblProduct]
}

As written in the code you can define constraints like autoincrement, data type, default, not null similar to what you can do in SQL. Read more about column here

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

initDb​

initDb api is used to initiate the database. It accepts database schema & creates or open database.

It returns boolean value which can be used to know if db is created or opened.

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");
}

Note :- The connection variable will be used to execute future queries so we don't 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
}

value does not contains id property because it is an autoincrement column. It will be automatically generated before storing data.

Now, let's insert this value into db - 

var insertCount = await connection.insert({
    into: 'Product',
    values: [value]
});

console.log(`${insertCount} rows inserted`);

Read data​

JsStore provides select API for reading data. Let's 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. For more filtering option , read where doc.

Updating data​

JsStore provides update API for reading data.

Consider we want to update Quantity to 2000 on the products with item name containing 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.

Consider we 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 let's make something awesome.

Tutorial and examples​

Check it out some tutorial & examples for more understanding -