localforage

What is localforage?

The localForage npm package is a fast and simple storage library for JavaScript. It improves the offline experience of web apps by using asynchronous storage (IndexedDB or WebSQL) with a simple, localStorage-like API. localForage uses a driver system that supports IndexedDB, WebSQL, and localStorage.

What are localforage's main functionalities?

Storing Data

This feature allows you to store data in the browser's asynchronous storage. The code sample demonstrates setting and then getting an item.

localforage.setItem('key', 'value').then(function () { return localforage.getItem('key'); }).then(function (value) { console.log(value); }).catch(function (err) { console.error(err); });

Retrieving Data

This feature allows you to retrieve data from the browser's asynchronous storage. The code sample demonstrates getting an item.

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

Removing Data

This feature allows you to remove data from the browser's asynchronous storage. The code sample demonstrates removing an item.

localforage.removeItem('key').then(function () { console.log('Key is removed'); }).catch(function (err) { console.error(err); });

Clearing Storage

This feature allows you to clear all data from the browser's asynchronous storage. The code sample demonstrates clearing the storage.

localforage.clear().then(function () { console.log('Storage is now empty'); }).catch(function (err) { console.error(err); });

Iterating Over Keys

This feature allows you to iterate over all key-value pairs in the browser's asynchronous storage. The code sample demonstrates iterating over keys.

localforage.iterate(function (value, key, iterationNumber) { console.log([key, value]); }).then(function () { console.log('Iteration has completed'); }).catch(function (err) { console.error(err); });

Other packages similar to localforage

dexie

Dexie is a wrapper library for indexedDB, which is a low-level API for client-side storage of significant amounts of structured data. Dexie provides a more powerful query language than localForage and is designed to work with complex data structures.

pouchdb

PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser. PouchDB was created to help web developers build applications that work as well offline as they do online. It is more feature-rich than localForage, with synchronization capabilities.

idb-keyval

idb-keyval is a super-simple-small promise-based keyval store implemented with IndexedDB, providing a localStorage-like API. It is much smaller in size than localForage but does not have the same level of browser support or features.

README

localForage

localForage is a fast and simple storage library for JavaScript. localForage improves the offline experience of your web app by using asynchronous storage (IndexedDB or WebSQL) with a simple, localStorage-like API.

localForage uses localStorage in browsers with no IndexedDB or WebSQL support. See the wiki for detailed compatibility info.

To use localForage, just drop a single JavaScript file into your page:

<script src="localforage.js"></script>
<script>localforage.getItem('something', myCallback);</script>

Download the latest localForage from GitHub, or install with npm:

npm install localforage

or bower:

bower install localforage

localForage is compatible with browserify.

Support

Lost? Need help? Try the localForage API documentation.

If you're stuck using the library, running the tests, or want to contribute to localForage, you can visit irc.mozilla.org and head to the #apps channel to ask questions about localForage.

The best person to ask about localForage is tofumatt, who is usually online from 8am-8pm GMT (London Time).

How to use localForage

Callbacks

Because localForage uses async storage, it has an async API. It's otherwise exactly the same as the localStorage API.

// In localStorage, we would do:
localStorage.setItem('key', JSON.stringify('value'));
alert('value');

// With localForage, we use callbacks:
localforage.setItem('key', 'value', function(err, value) { alert(value); });

Similarly, please don't expect a return value from calls to localforage.getItem(). Instead, use a callback:

// Synchronous; slower!
var value = JSON.parse(localStorage.getItem('key'));
alert(value);

// Async, fast, and non-blocking!
localforage.getItem('key', function(err, value) { alert(value) });

Callbacks in localForage are Node-style (error argument first) since version 0.9.3. This means if you're using callbacks, your code should look like this:

// Use err as your first argument.
localforage.getItem('key', function(err, value) {
    if (err) {
        console.error('Oh noes!');
    } else {
        alert(value);
    }
});

You can store any type in localForage; you aren't limited to strings like in localStorage. Even if localStorage is your storage backend, localForage automatically does JSON.parse() and JSON.stringify() when getting/setting values.

Promises

Promises are pretty cool! If you'd rather use promises than callbacks, localForage supports that too:

function doSomethingElse(value) {
    console.log(value);
}

// With localForage, we allow promises:
localforage.setItem('key', 'value').then(doSomethingElse);

When using Promises, err is not the first argument passed to a function. Instead, you handle an error with the rejection part of the Promise:

// A full setItem() call with Promises.
localforage.setItem('key', 'value').then(function(value) {
    alert(value + ' was set!');
}, function(error) {
    console.error(error);
});

localForage relies on native ES6 Promises, but ships with an awesome polyfill for browsers that don't support ES6 Promises yet.

Storing Blobs, TypedArrays, and other JS objects

localForage supports storing all native JS objects that can be serialized to JSON, as well as ArrayBuffers, Blobs, and TypedArrays. Check the API docs for a full list of types supported by localForage.

All types are supported in every storage backend, though storage limits in localStorage make storing many large Blobs impossible.

Configuration

You can set database information with the config() method. Available options are driver, name, storeName, version, size, and description.

Example:

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'
});

Note: you must call config() before you interact with your data. This means calling config() before using getItem(), setItem(), removeItem(), clear(), key(), keys() or length().

RequireJS

You can use localForage with RequireJS:

define(['localforage'], function(localforage) {
    // As a callback:
    localforage.setItem('mykey', 'myvalue', console.log);

    // With a Promise:
    localforage.setItem('mykey', 'myvalue').then(console.log);
});

Web Workers

Web Worker support in Firefox is blocked by bug 701634. Until it is fixed, web workers are not officially supported by localForage.

Framework Support

If you use a framework listed, there's a localForage storage driver for the models in your framework so you can store data offline with localForage. We have drivers for the following frameworks:

• AngularJS
• Backbone
• Ember

If you have a driver you'd like listed, please open an issue to have it added to this list.

Custom Drivers

You can create your own driver if you want; see the defineDriver API docs.

There is a list of custom drivers on the wiki.

Working on localForage

You'll need node/npm, bower, and Grunt.

To work on localForage, you should start by forking it and installing its dependencies. Replace USERNAME with your GitHub username and run the following:

git clone [e-mail]:USERNAME/localForage.git
cd localForage
npm install
bower install

Omitting the bower dependencies will cause the tests to fail!

Running Tests

You need PhantomJS installed to run local tests. Run npm test (or, directly: grunt test). Your code must also pass the linter.

localForage is designed to run in the browser, so the tests explicitly require a browser environment. Local tests are run on a headless WebKit (using PhantomJS).

When you submit a pull request, tests will be run against all browsers that localForage supports on Travis CI using Sauce Labs.

License

This program is free software; it is distributed under an Apache License.

---

Copyright (c) 2013-2015 Mozilla (Contributors).