IndexedDB Manipulation with Dexie — Modifying and Deleting Items

IndexedDB is a way to store data in the browser.

It lets us store larger amounts of data than local storage in an asynchronous way.

Dexie makes working with IndexedDB easier.

In this article, we’ll take a look at how to start working with IndexedDB with Dexie.

Limiting Number of Results Returned

We can limit the number of results returned with the limit method.

For instance, we can write:

const db = new Dexie("friends");
db.version(1).stores({
  friends: "id, name, age"
});
(async () => {
  await db.friends.put({
    id: 1,
    name: "jane",
    age: 78
  });
  await db.friends.put({
    id: 2,
    name: "mary",
    age: 76
  });
  const someFriends = await db.friends
    .orderBy('name')
    .limit(10)
    .toArray()
  console.log(someFriends)
})()

We call limit with 10 as its argument to limit the number of items to 10.

Modifying Results in a Collection

We can modify results in a collection with the modify method.

To use it, we write:

const db = new Dexie("friends");
db.version(1).stores({
  friends: "id, name, age"
});
(async () => {
  await db.friends.put({
    id: 1,
    name: "jane",
    age: 78
  });
  await db.friends.put({
    id: 2,
    name: "mary",
    age: 76
  });
  await db.friends
    .orderBy('name')
    .modify({
      isBigfoot: true
    });
})()

to get the items in the friends table ordered by the name field.

Then we call modify to add the isBigFoot field and set it to true in each item in the collection.

We can also pass in a function by writing:

const db = new Dexie("friends");
db.version(1).stores({
  friends: "id, name, age"
});
(async () => {
  await db.friends.put({
    id: 1,
    name: "jane",
    age: 78
  });
  await db.friends.put({
    id: 2,
    name: "mary",
    age: 76
  });
  await db.friends
    .orderBy('name')
    .modify(friend => {
      friend.age *= 0.5;
    });
})()

We change the age value of each entry in the collection by multiplying it by 0.5.

Also, we can use the 2nd parameter to reference the result entry.

For instance, we can writeL

const db = new Dexie("friends");
db.version(1).stores({
  friends: "id, name, age"
});
(async () => {
  await db.friends.put({
    id: 1,
    name: "jane",
    age: 78
  });
  await db.friends.put({
    id: 2,
    name: "mary",
    age: 76
  });
  await db.friends
    .orderBy('name')
    .modify((friend, ref) => {
      ref.value = {
        ...ref.value,
        age: 55
      }
    });
})()

We set the ref.value to set the value of the entry to something else.

Also, we can use it to delete an object by using the delete operator.

For example, we can write:

const db = new Dexie("friends");
db.version(1).stores({
  friends: "id, name, age"
});
(async () => {
  await db.friends.put({
    id: 1,
    name: "jane",
    age: 78
  });
  await db.friends.put({
    id: 2,
    name: "mary",
    age: 76
  });
  await db.friends
    .orderBy('name')
    .modify((friend, ref) => {
      delete ref.value;
    });
})()

We just delete the ref.value property to delete an item.

The example above is the same as:

const db = new Dexie("friends");
db.version(1).stores({
  friends: "id, name, age"
});
(async () => {
  await db.friends.put({
    id: 1,
    name: "jane",
    age: 78
  });
  await db.friends.put({
    id: 2,
    name: "mary",
    age: 76
  });
  await db.friends
    .orderBy('name')
    .delete();
})()

Conclusion

We can modify and delete items with the collection’s modify method with Dexie.