Since introduction of Offline storage in HTML5 many new trends have been started by storing persistent data locally on users system for future use. This leverages browsers and users system's capability to store data locally for offline usage.

Browsers use different technologies for storing the data which include WebSQL, localstorage and IndexedDB. However as a developer it becomes difficult to select the best one and even program it differently according to browsers capability, this is where localForage comes into play.

LocalForage is JavaScript library developed by Mozilla which saves the developer to learn different techniques to save data and even program according to browsers capabilities detecting it as first step.

As per the current documentation localForage works in all modern browsers (IE 8 and above). Asynchronous storage is available in all browsers in bold, with localStorage fallback in parentheses.

1. Android Browser 2.1
2. Blackberry 7 3. Chrome 23 4. Chrome for Android 32 5. Firefox 18 6. Firefox for Android 25 7. Firefox OS 1.0 8. IE 10 (IE 8+ with localStorage) 9. IE Mobile 10 10. Opera 15 (Opera 10.5+ with localStorage) 11. Opera Mobile 11 12. Phonegap/Apache Cordova 1.2.0 13. Safari 3.1 (includes Mobile Safari)

Localforage library can be download from http://mozilla.github.io/localForage/

once downloaded the library can be included in your source

<script src="/path/to/localforage.js"></script>

Saving data using localforage:

localforage has a method setitem which is used to store the data

localforage.setItem('key', 'value', callbackFunction);

The value can be any kind of data you want eg. a string, number, object, or even a file. If the key is not present a new record is created and if it is present the key is overidden with the new value.

Retreiving data from localForage:

Using localforage getItem function the data can be retreived from the database.

localforage.getItem('key', callbackFunction);

Deleting data

Localforage has a removeItem function which can be used to remove the data from the storage.

localforage.removeItem('key', callbackFunction);

Clearing all the records

Localforage has a function clear that clears all database in the storage used by application.

localforage.clear(callbackFunction);

Other than this localforage has other function such as length which returns the number of records in the storage.

localforage.length(callback);

To get the key name at a given index we can use key function.

localforage.key(n, callback);

The important point to remeber while using the localforage is that it supports Promises also.

An example below would show how to use promises with localforage.

localforage.getItem('key').then(function(value) {
    console.log(value);
});

Reference

http://spmjs.io/package/localforage