IndexedDB Manipulation with Dexie — Offsets, Or, and Raw Results

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.

Ignore the First n Items Before the Given Offset

We can call the offset method to return the first n items after the given offset.

For instance, we can use it 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')  
    .offset(10);  
})()

Then we skip the first 10 results in the collection and include the rest.

Logical OR Operation

We can use the or method to combine 2 conditions together with the logical OR operator in the query.

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  
    .where("name")  
    .equalsIgnoreCase("jane")  
    .or("age")  
    .above(40)  
    .sortBy("name")  
  console.log(someFriends)  
})()

We call where with the 'name' argument to query by the name.

And we find the entries with the given name with equalsIgnoreCase .

Then we call or to find the items with the age above 40.

And we call sortBy to sort by the name field.

Get an Array Containing All Primary Keys of the Collection

We can use the primaryKeys method to return a promise with an array of primary keys in the collection.

For instance, we can use it 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  
  });  
  const keys = await db.friends  
    .where("name")  
    .equalsIgnoreCase("jane")  
    .primaryKeys()  
  console.log(keys)  
})()

id is the primary key of each entry.

Then we call primaryKeys to return a promise with the array of primary keys.

Get Raw Results

We can get thee raw results from a query with the raw method.

The results won’t be filtered through the reading hooks.

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 keys = await db.friends  
    .where("name")  
    .equalsIgnoreCase("jane")  
    .raw()  
    .toArray()  
  console.log(keys)  
})()

to use it.

Using raw won’t do things like mapping objects to their mapped class.

Conclusion

We can ignore the first n items from the results, get primary keys, and get raw results from an IndexedDB collection with Dexie.