Localforage.js – Client Side Data Storage Library, Using IndexedDB and WebSQL

0
0
Localforage.js – Client Side Data Storage Library, Using IndexedDB and WebSQL

Build Status
NPM version
Dependency Status
npm
jsDelivr Hits
minzipped size

localForage is a helpful e book a tough and easy storage library for JavaScript. localForage
improves the offline skills of your internet app by using asynchronous storage
(IndexedDB or WebSQL) with a simple, localStorage-relish API.

localForage makes use of localStorage in browsers and not using a IndexedDB or
WebSQL pink meat up. Glimpse the wiki for detailed compatibility info.

To make use of localForage, apt drop a single JavaScript file into your web page:

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

Attempt the live instance.

Obtain the latest localForage from GitHub, or arrange with
npm:

localForage is relish minded with browserify.

Toughen

Misplaced? Need succor? Attempt the
localForage API documentation. localForage API文档也有中文版。

Should you’re having misery using the library, working the exams, or need to contribute to localForage, please scrutinize through the present considerations in your roar first ahead of growing a model up to date one. Should you proceed to need succor, feel free to file a state.

Safari 10.1+

Since Safari 10.1 we default to IndexedDB; watch the CHANGELOG for more information.

Callbacks vs Guarantees

On yarn of localForage makes use of async storage, it has an async API.
Or not it’s in any other case precisely equal to the
localStorage API.

localForage has a twin API that potential that you would be able to both use Node-kind callbacks
or Promises. Should you would furthermore very correctly be unsure which one is suitable for you, it’s recommended to make use of Guarantees.

This is an occasion of the Node-kind callback plot:

localforage.setItem('key', 'signal', intention (err) {
  // if err is non-null, we obtained an error
  localforage.getItem('key', intention (err, signal) {
    // if err is non-null, we obtained an error. in any other case, signal is the worth
  });
});

And the Promise plot:

localforage.setItem('key', 'signal').then(intention () {
  return localforage.getItem('key');
}).then(intention (signal) {
  // we obtained our signal
}).use(intention (err) {
  // we obtained an error
});

Or, use async/await:

attempt {
    const signal = await localforage.getItem('somekey');
    // This code runs as soon as the worth has been loaded
    // from the offline retailer.
    console.log(signal);
} use (err) {
    // This code runs if there had been any errors.
    console.log(err);
}

For extra examples, please search advice from the API clinical doctors.

Storing Blobs, TypedArrays, and various JS objects

You may be able to retailer any type in localForage; you’d furthermore very correctly be not cramped to strings relish in
localStorage. Though localStorage is your storage backend, localForage
robotically does JSON.parse() and JSON.stringify() when getting/environment
values.

localForage helps storing all native JS objects that will possibly possibly possibly be serialized to
JSON, as correctly as ArrayBuffers, Blobs, and TypedArrays. Check out the
API clinical doctors for a chunky record of sorts supported by localForage.

All kinds are supported in each storage backend, though storage limits in
localStorage plot storing many broad Blobs not doable.

Configuration

You may be able to place database information with the config() methodology.
Out there alternate options are driver, decide, storeName, mannequin, dimension, and
description.

Occasion:

localforage.config({
    driver      : localforage.WEBSQL, // Energy WebSQL; identical as using setDriver()
    decide        : 'myApp',
    mannequin     : 1.0,
    dimension        : 4980736, // Measurement of database, in bytes. WebSQL-apt for now.
    storeName   : 'keyvaluepairs', // Must nonetheless be alphanumeric, with underscores.
    description : 'some description'
});

Showcase: you enjoyment of gotten to name config() ahead of you have interaction together with your information. This
blueprint calling config() ahead of using getItem(), setItem(), removeItem(),
certain(), key(), keys() or size().

A couple of conditions

You may be able to internet a couple of conditions of localForage that current loads of shops
using createInstance. The whole configuration alternate options outdated by
config are supported.

var retailer = localforage.createInstance({
  decide: "nameHere"
});

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

// Setting the required on one amongst these wouldn't affect the loads of.
retailer.setItem("key", "signal");
otherStore.setItem("key", "value2");

RequireJS

You may be able to make use of localForage with RequireJS:

present a proof for(['localforage'], intention(localforage) {
    // As a callback: 
    localforage.setItem('mykey', 'myvalue', console.log);

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

Browserify and Webpack

localForage 1.3+ works with each Browserify and Webpack. Should you’re using an
earlier mannequin of localForage and are having concerns with Browserify or
Webpack, please improve to 1.3.Zero or above.

Webpack will emit a warning about using a prebuilt javascript file which is okay. In present a proof for so as to uncover the warning you’d nonetheless exclude localforage from being parsed by webpack using the next conf :

module: {
  noParse: /node_modules/localforage/dist/localforage.js/,
  loaders: [...],

TypeScript

Should you enjoyment of gotten the allowSyntheticDefaultImports compiler option place to trustworthy in your tsconfig.json (supported in TypeScript v1.8+), you’d nonetheless use:

import localForage from "localforage";

In another case you’d nonetheless use one amongst the next:

import as localForage from "localforage";
// or, in case that the typescript mannequin that you'd furthermore very correctly be using
// wouldn't pink meat up ES6 form imports for UMD modules relish localForage
import localForage = require("localforage");

Framework Toughen

Should you use a framework listed, there is a localForage storage driver for the
devices in your framework so you’d furthermore retailer information offline with localForage. We
enjoyment of drivers for the next frameworks:

Should you enjoyment of gotten a driver you may possibly relish listed, please
open a state to please in it
added to this record.

Customized Drivers

You may be able to internet your have driver in present a proof for for you; watch the
defineDriver API scientific medical doctors.

There might be a list of personalized drivers on the wiki.

You are going to want node/npm and
bower.

To work on localForage, you’d nonetheless originate by
forking it and inserting in its
dependencies. Change USERNAME together with your GitHub username and urge the
following:

# Set up bower globally should you invent not enjoyment of it: 
npm arrange -g bower

# Change USERNAME together with your GitHub username: 
git clone [email protected]:USERNAME/localForage.git
cd localForage
npm arrange
bower arrange

Omitting the bower dependencies will motive the exams to fail!

Working Assessments

You want PhantomJS put in to induce native exams. Dash npm take a look at (or,
abruptly: command take a look at). Your code should additionally chase the
linter.

localForage is designed to induce inside the browser, so the exams explicitly require
a browser environment. Native exams are urge on a headless WebKit (using
PhantomJS).

Should you occur to put up a pull query, exams shall be urge towards all browsers that
localForage helps on Travis CI using Sauce Labs.

Library Measurement

As of mannequin 1.7.Three the payload added to your app is extraordinarily restricted. Served using gzip compression, localForage will add less than 10okay to your whole bundle dimension:

minified
`~29kB`
gzipped
`~8.8kB`
brotli’d
`~7.8kB`

This program is free software program; it’s miles disbursed under an
Apache License.


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

LEAVE A REPLY

Please enter your comment!
Please enter your name here