localForage is a fast and simple JavaScript repository. LocalForage improves the offline experience of web applications by using asynchronous storage (IndexedDB or WebSQL) and a simple localStorage-like API.
In browsers that do not support IndexedDB or WebSQL, localForage uses localStorage. See the wiki for compatibility details.
Using localForage, just put the JavaScript file into the page:
< script src =" localforage/dist/localforage.js " > </ script >
< script > localforage . getItem ( 'something' , myCallback ) ; </ script >Try the example.
Download the latest localForage on GitHub, or install it via npm:
npm install localforageOr through bower:
bower install localforagelocalForage is also browserify compatible.
Feeling confused? Need help? Try the localForage API documentation.
If you are using this library, running tests or want to contribute to localForage, visit irc.freenode.net and consult the #localforage channel for questions about localForage.
The best consultant is tofumatt , whose online time is generally 10 am - 8 pm Greenwich time.
Starting with Safari 10.1, the default is IndexedDB; see CHANGELOG for more.
Since localForage uses asynchronous storage, the API is asynchronous. In other respects, it is exactly the same as the localStorage API.
localForage supports two APIs, you can use callback function form or promise. If you are not sure which one is better for you, then it is recommended to use Promise.
Here is an example of the form of a callback function:
localforage . setItem ( 'key' , 'value' , function ( err ) {
// 若 err 不为 null,则表示出错
localforage . getItem ( 'key' , function ( err , value ) {
// 若 err 不为 null,则表示出错,否则 value 为 key 对应的值
} ) ;
} ) ;Promise Format:
localforage . setItem ( 'key' , 'value' ) . then ( function ( ) {
return localforage . getItem ( 'key' ) ;
} ) . then ( function ( value ) {
// 成功获取值
} ) . catch ( function ( err ) {
// 出错了
} ) ;For more examples, please visit the API documentation.
You can store any type in localForage; unlike localStorage, only strings are stored. Even if the storage form of the backend is localStorage, localForage will automatically execute JSON.parse() and JSON.stringify() when it is necessary to get/set the value.
As long as it is a native JS object that can be serialized into JSON, localForage can be stored, including ArrayBuffers, Blobs and TypedArrays. In the API documentation you can view all types of localForage support.
All backend storage drivers support all types in, but localStorage has storage restrictions, so large blobs cannot be stored.
You can set the database information through config() method. The available options are driver , name , storeName , version , size , and description .
Example:
localforage . config ( {
driver : localforage . WEBSQL , // 使用 WebSQL;也可以使用 setDriver()
name : 'myApp' ,
version : 1.0 ,
size : 4980736 , // 数据库的大小,单位为字节。现仅 WebSQL 可用
storeName : 'keyvaluepairs' , // 仅接受字母,数字和下划线
description : 'some description'
} ) ; **Note: ** Before data interaction, you must call config() first. That is, you must call config() before using getItem() , setItem() , removeItem() clear() , key() , keys() or length() .
Through the createInstance method, you can create multiple localForage instances that can point to different data warehouses. All configuration options in config are available.
var store = localforage . createInstance ( {
name : "nameHere"
} ) ;
var otherStore = localforage . createInstance ( {
name : "otherName"
} ) ;
// 设置某个数据仓库 key 的值不会影响到另一个数据仓库
store . setItem ( "key" , "value" ) ;
otherStore . setItem ( "key" , "value2" ) ; You can use localForage via RequireJS:
define ( [ 'localforage' ] , function ( localforage ) {
// 作为回调函数
localforage . setItem ( 'mykey' , 'myvalue' , console . log ) ;
// 使用 Promise
localforage . setItem ( 'mykey' , 'myvalue' ) . then ( console . log ) ;
} ) ; localForage 1.3+ supports Browserify and webpack. If you are using an earlier version of localForage and have problems with Browserify or webpack, upgrade to 1.3.0 or later.
When pre-built a normal JavaScript file, webpack may prompt a warning message. If you don't want to see the warning, you can use the following configuration to ignore localforage when webpack parsing:
module : {
noParse : / node_modules/localforage/dist/localforage.js / ,
loaders : [ ... ] , If you set the allowSyntheticDefaultImports compilation option to true in tsconfig.json (supports TypeScript v1.8+), then you should use it like this:
import localForage from "localforage" ;Otherwise, you should use one of the following methods:
import * as localForage from "localforage" ;
// 若你用的 TypeScript 版本不支持 ES6 风格导入像 localForage 这样的 UMD 模块,则用如下方式导入:
import localForage = require ( "localforage" ) ; If you use the following framework, localForage provides modules as drivers for these frameworks, and you can store data offline through localForage. The supported framework drivers are as follows:
If you have other drivers and want to add them to this list, please submit an issue.
You can create your own drivers; see the defineDriver API documentation.
There is a list of custom drivers in the wiki.
You need to have node/npm and bower.
To develop localForage, you need to fork first and install dependencies. Replace USERNAME with your GitHub username and run the following command:
# 若你没有安装过 bower,则需要先全局安装 bower
npm install -g bower
# 将 USERNAME 替换为你的 GitHub 用户名:
git clone [email protected]:USERNAME/localForage.git
cd localForage
npm install
bower installMissing bower dependencies will cause test failure!
PhantomJS is required to execute local tests. Execute npm test (or directly: grunt test ). Your code must pass linter check.
localForage can only run in the browser, so a browser environment is required to perform tests. Local tests run on a headless WebKit browser (using PhantomJS).
Through Sauce Labs, localForage supports Travis CI, and tests will be automatically performed in all browsers when you pull request.
This program is free software; the license agreement is Apache License.
Copyright (c) 2013-2016 Mozilla (Contributors).