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
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
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
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
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:
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