Javascript Async LocalForage API to Save Data to Offline Storage Using IndexedDB & WebSQL in Browser

Welcome folks today in this blog post we will be talking about a new asynchronous web storage api for browsers called localforage which allows to save user data for offline use when there is no internet connection for web apps.

It’s a great alternative to localstorage api

Features

It supports promises,callbacks and async await syntax

It also support languages such as javascript and typescript

It supports all the major frontend frameworks such as react,angular, vue & Nuxt

Get Started

In order to get started you need to include the cdn of this localforage library as shown below

<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js"></script>

1	<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js"></script>

Just include the above script tag inside the html page of your website

You can even install it as a node.js package as shown below

npm i localforage

1	npm i localforage

Usage

Now to use this library guys we have taken first of all the callbacks example as shown below

callbacks example of localforage

localforage.setItem('key', 'value', function (err) {
  // if err is non-null, we got an error
  localforage.getItem('key', function (err, value) {
    // if err is non-null, we got an error. otherwise, value is the value
  });
});

localforage.setItem('key', 'value', function (err) {

// if err is non-null, we got an error

localforage.getItem('key', function (err, value) {

// if err is non-null, we got an error. otherwise, value is the value

});

As you can see we are using the setItem to store the items inside the web storage and then the callback function is executed and also to get the items from the storage we are using the getitem method and then again the callback function is called once again here we get the actual values which are stored inside the storage

Now we will use the promises example of localforage library as shown below

promises example

localforage.setItem('key', 'value').then(function () {
  return localforage.getItem('key');
}).then(function (value) {
  // we got our value
}).catch(function (err) {
  // we got an error
});

localforage.setItem('key', 'value').then(function () {

return localforage.getItem('key');

}).then(function (value) {

// we got our value

}).catch(function (err) {

// we got an error

});

As you can see we are using the setItem to store the items inside the web storage and then the promise is returned and we are handling the promise by the then keyword and the errors inside the catch block and also to get the items from the storage we are using the getitem method

Now we will use the async await example of localforage library as shown below

async await example

try {
    const value = await localforage.getItem('somekey');
    // This code runs once the value has been loaded
    // from the offline store.
    console.log(value);
} catch (err) {
    // This code runs if there were any errors.
    console.log(err);
}

try {

const value = await localforage.getItem('somekey');

// This code runs once the value has been loaded

// from the offline store.

console.log(value);

} catch (err) {

// This code runs if there were any errors.

console.log(err);

}

As you can see we are using the setItem to store the items inside the web storage and getItem to get the items from the storage. All this code is executed in the try and catch block and also here we are using the await keyword because it is the async function.

Setting the Database Configuration

Now guys in order to use this localforage web storage we need to setup the config object where we provide the details about which database it will use either it can be WebSQL or indexedDB

And also inside this we will provide the size of the database in numbers. And also the name,description & version of the database as shown below

localforage.config({
    driver      : localforage.WEBSQL, // Force WebSQL; same as using setDriver()
    name        : 'myApp',
    version     : 1.0,
    size        : 4980736, // Size of database, in bytes. WebSQL-only for now.
    storeName   : 'keyvaluepairs', // Should be alphanumeric, with underscores.
    description : 'some description'
});

localforage.config({

driver : localforage.WEBSQL, // Force WebSQL; same as using setDriver()

name : 'myApp',

version : 1.0,

size : 4980736, // Size of database, in bytes. WebSQL-only for now.

storeName : 'keyvaluepairs', // Should be alphanumeric, with underscores.

description : 'some description'

});

Multiple instances

You can even create multiple instances or stores using the createInstance method

var store = localforage.createInstance({
  name: "nameHere"
});

var otherStore = localforage.createInstance({
  name: "otherName"
});

// Setting the key on one of these doesn't affect the other.
store.setItem("key", "value");
otherStore.setItem("key", "value2");

var store = localforage.createInstance({

});

var otherStore = localforage.createInstance({

});

// Setting the key on one of these doesn't affect the other.

store.setItem("key", "value");

otherStore.setItem("key", "value2");

Complete Example

Now I will be showing the full example in javascript inside the browser. Just make a index.html file and copy paste the below code

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js"></script>
<script>
   localforage.config({
    driver      : localforage.WEBSQL, // Force WebSQL; same as using setDriver()
    name        : 'myApp',
    version     : 1.0,
    size        : 4980736, // Size of database, in bytes. WebSQL-only for now.
    storeName   : 'keyvaluepairs', // Should be alphanumeric, with underscores.
    description : 'some description'
});

var store = localforage.createInstance({
  name: "nameHere"
});

var otherStore = localforage.createInstance({
  name: "otherName"
});

// Setting the key on one of these doesn't affect the other.
store.setItem("key", "value");
otherStore.setItem("key", "value2");
</script>

</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

localforage.config({

driver : localforage.WEBSQL, // Force WebSQL; same as using setDriver()

name : 'myApp',

version : 1.0,

size : 4980736, // Size of database, in bytes. WebSQL-only for now.

storeName : 'keyvaluepairs', // Should be alphanumeric, with underscores.

description : 'some description'

});

var store = localforage.createInstance({

});

var otherStore = localforage.createInstance({

});

// Setting the key on one of these doesn't affect the other.

store.setItem("key", "value");

otherStore.setItem("key", "value2");

</script>

</html>

Working in TypeScript

It can also work in typescript also. We just need to tweak some settings inside the compiler options of typescript as shown below

If you have the allowSyntheticDefaultImports compiler option set to true in your tsconfig.json (supported in TypeScript v1.8+), you should use:

import * as localForage from "localforage";
// or, in case that the typescript version that you are using
// doesn't support ES6 style imports for UMD modules like localForage
import localForage = require("localforage");

import * as localForage from "localforage";

// or, in case that the typescript version that you are using

// doesn't support ES6 style imports for UMD modules like localForage

import localForage = require("localforage");

Framework Support

It can work in multiple frameworks. The list are as follows

AngularJS
Angular 4 and up
Backbone

Ember
Vue
NuxtJS