Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on October 1, 2022

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

 

 

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

 

 

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

 

 

JavaScript
1
2
3
4
5
6
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

 

 

JavaScript
1
2
3
4
5
6
7
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

 

 

JavaScript
1
2
3
4
5
6
7
8
9
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

 

 

JavaScript
1
2
3
4
5
6
7
8
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

 

 

1
2
3
4
5
6
7
8
9
10
11
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");

 

 

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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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>

 

 

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:

 

 

TypeScript
1
2
3
4
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

 

Recent Posts

  • Javascript PDFObject Library Example to Render PDF Document From URL or From Local PC in Browser
  • Node.js Express Project to Extract Text From Word (.DOCX) File & Save it as Text File in Browser
  • Node.js Tutorial to Parse & Extract Text & Tables From PDF Document Using pdfreader Library in Javascript
  • Node.js Express Project to Stream Local MP4 Video in Webpage Using Fetch API in Javascript
  • Node.js Express Tutorial to Read & Write Stream of Data From Buffer to Server Using Pipes in Browser
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme