Skip to main content

Get Started

Welcome to the Get Started tutorial for using JsStore to perform CRUD operations in IndexedDB.

To follow along with this tutorial, you can download the example code from the Crud implementation repository.

Let's dive in and learn how to leverage the power of JsStore to work with IndexedDB!

Introduction​

JsStore is a wrapper for IndexedDB that provides a simple SQL-like API, making it easy to learn and use.

IndexedDB queries can be executed inside a web worker, and JsStore preserves this functionality by providing a separate worker file.

You can choose to execute queries either inside a web worker or without one. However, it is strongly recommended to use a web worker because it runs scripts in a background thread, improving performance and responsiveness.

Installation​

There are various ways to install JsStore. For detailed instructions, please refer to the installation guide.

To get started, you can download the necessary files from the latest JsStore release. Make sure to download both jsstore.js and jsstore.worker.js.

Next, create an HTML page and include jsstore.js using the following code:

<!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 allows you to query the database. It can be initialized with or without a web worker file.

When initialized with a worker file, JsStore creates a web worker and executes the query inside it. This provides better performance and responsiveness. For more information, refer to the Connection page.

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

Creating Database​

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

Let's 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 columns 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 the database schema and creates or opens the database.

It returns a boolean value which can be used to know if the database 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');

Congratulations on completing this article! Now it's time to put your knowledge into action and create something amazing.

Tutorial and examples​

For a better understanding, check out the following tutorials and examples: