# Dexie.js : The Smart Way to Handel Local Database in JavaScript

### Introduction

If you’ve ever worked with **IndexedDB**, you know it can be a bit painful—lots of boilerplate and a complex API just to do simple things. That’s where **Dexie.js** comes in. It’s a lightweight wrapper that makes IndexedDB simple, clean, and developer-friendly.

I recently started building an **offline-first application**, and I needed something more powerful than localStorage and less messy than raw IndexedDB. After exploring a few options, **Dexie.js** turned out to be the perfect fit.

In this article, I’ll walk you through the basics—setting up a database, performing CRUD operations, and integrating it with **React** (don’t worry if you’re not into React, the concepts will still make sense).

### Why I Chose Dexie.js for Offline Data Management.

Dexie.js is a smart wrapper around **IndexedDB** that makes working with local databases in JavaScript much easier and cleaner. If you’ve ever tried IndexedDB directly, you know how tricky it can be. Dexie simplifies that headache.

While building an **offline-first application**, one big challenge is choosing the right way to manage local data. localStorage is too limited, and working directly with IndexedDB feels like wrestling with unnecessary complexity.

**Dexie.js**—a lightweight and developer-friendly solution that keeps things simple while still giving you the power of IndexedDB under the hood.

### Let’s write the code.

First, we need to set up the database instance:

```javascript
import Dexie from "dexie";

const db = new Dexie('myDatabase');
            db.version(1).stores({
                    user : '++id, name, email, password, roleId',
                    tasks : '++id, title, description, isCompleted, createdAt, updatedAt'
            })
```

That’s it! This small setup gives you two tables: user and tasks. Now you can start performing different operations without the hassle of raw IndexedDB code.

### **CRUD Operations with Dexie.js**

Below are the most common operations:

```javascript
import db from 'path-to-db'
//Add Task
const addTaskToDB = async(data)=>{
    await db.tasks.add(data)
}

//Delete Task
const deleteTaskById = async(id)=>{
    await db.tasks.delete(id)
}

//Update Task
const updateTask = async(data)=>{
    await db.tasks.put(data)
}

//Get Task by Id
const getTaskById = async (id)=>{
    return db.tasks.get(id)
}

//Get all Tasks
const getAllTasks = async()=>{
    return db.tasks.toArray();
}

export {addTaskToDB}
```

### **Using Dexie in a React Component**

Here’s a quick example to show how we can integrate it with React:

```javascript
import {addTaskToDB} from 'actions'
const MyReactComponent = ()=>{
    const [newTask, setNewTask] = useState({
            title : "",
            description : ""
      });

    const addTask = async()=>{
        await addTaskToDB(newTask);
         globalThis.alert("Task Added")
    }

    const handelTaskInputChange = (evt)=>{
        const {name, value} = evt.target;
        setNewTask((prev)=>({...prev, [name]: value}))
     }


    return(
        <form onSubmit={addTask}>
            <input type='text' onChange={handelTaskInputChange} value={newTask.title}/>
            <input type='text' onChange={handelTaskInputChange} value={newTask.description}>
            <button>Add Task +</button>
        </form>
    )
}
```

### **Advance Queries**

1. Suppose you need to update specific fields (like name) for multiple rows in a Dexie.js table based on their id. A common real-world scenario is when you have an array of objects, and you want to update the database to reflect new values where the id matches.
    
    Let’s break this down with an example:
    

```javascript
const data = [
  { id: 1, name: "Sarthak" },
  { id: 2, name: "Shubham" },
  { id: 3, name: "Rahul" }
];

await db.tableName
  .where("id")
  .anyOf(data.map((row) => row.id))
  .modify((record) => {
    const updated = data.find((row) => row.id === record.id);
    if (updated) {
      record.name = updated.name;
    }
  });
```

### **Final Thoughts**

If you’re tired of the limitations of localStorage or the complexity of IndexedDB, Dexie.js is the perfect middle ground. It’s fast, reliable, and a great tool for building **offline-first applications**.

I hope this guide helped you get started. If you’ve used Dexie before, share your experience in the comments!