localforage vs @react-native-async-storage/async-storage vs redux-persist vs @react-native-community/async-storage vs react-native-encrypted-storage vs react-native-sensitive-info
Storage Solutions for React Native Applications Comparison
1 Year
localforage@react-native-async-storage/async-storageredux-persist@react-native-community/async-storagereact-native-encrypted-storagereact-native-sensitive-infoSimilar Packages:
What's Storage Solutions for React Native Applications?

These packages provide various storage solutions for React Native applications, enabling developers to persist data locally on the device. They cater to different needs such as simple key-value storage, encrypted storage for sensitive information, and integration with Redux for state management. Each package has its own strengths and use cases, making it essential to choose the right one based on the specific requirements of the application.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
localforage4,365,46725,485-2484 years agoApache-2.0
@react-native-async-storage/async-storage1,695,8734,923381 kB19a month agoMIT
redux-persist1,193,76613,011-5966 years agoMIT
@react-native-community/async-storage69,0804,923-195 years agoMIT
react-native-encrypted-storage41,827574151 kB41-MIT
react-native-sensitive-info24,5749871.4 MB46-MIT
Feature Comparison: localforage vs @react-native-async-storage/async-storage vs redux-persist vs @react-native-community/async-storage vs react-native-encrypted-storage vs react-native-sensitive-info

Storage Type

  • localforage:

    Supports multiple storage backends (IndexedDB, WebSQL, localStorage) and can handle complex data structures, making it versatile for various use cases.

  • @react-native-async-storage/async-storage:

    Provides simple key-value storage, suitable for lightweight data persistence without complex structures.

  • redux-persist:

    Stores Redux state in a persistent manner, allowing for easy rehydration of application state across sessions.

  • @react-native-community/async-storage:

    Similar to the AsyncStorage package, it offers key-value storage but is considered a legacy option.

  • react-native-encrypted-storage:

    Focuses on secure storage, encrypting data at rest to protect sensitive information.

  • react-native-sensitive-info:

    Uses platform-specific secure storage solutions (iOS Keychain and Android Keystore) to store sensitive data securely.

Security

  • localforage:

    Does not inherently provide encryption; it is recommended to implement additional security measures for sensitive data.

  • @react-native-async-storage/async-storage:

    Does not provide built-in encryption; data is stored in plain text, making it unsuitable for sensitive information.

  • redux-persist:

    Security depends on the storage engine used; sensitive data should be handled carefully and may require additional encryption.

  • @react-native-community/async-storage:

    Similar to AsyncStorage, it lacks encryption features, making it less secure for sensitive data storage.

  • react-native-encrypted-storage:

    Offers strong encryption for data at rest, making it suitable for sensitive information storage.

  • react-native-sensitive-info:

    Highly secure, leveraging platform-specific encryption methods to protect sensitive information effectively.

Ease of Use

  • localforage:

    Requires a bit more setup due to its versatility, but still offers a straightforward API for developers.

  • @react-native-async-storage/async-storage:

    Very easy to use with a simple API, making it suitable for quick implementations.

  • redux-persist:

    Integrates seamlessly with Redux, but requires understanding of Redux state management for effective use.

  • @react-native-community/async-storage:

    Also easy to use, but may not be recommended for new projects due to its legacy status.

  • react-native-encrypted-storage:

    Easy to use with clear documentation, but requires understanding of encryption concepts for best practices.

  • react-native-sensitive-info:

    User-friendly API with clear examples, but may require additional setup for secure storage configurations.

Performance

  • localforage:

    Performance can vary based on the storage backend used; generally efficient for larger datasets.

  • @react-native-async-storage/async-storage:

    Optimized for performance with minimal overhead, suitable for most applications.

  • redux-persist:

    Performance can be impacted by the size of the Redux store and the chosen storage engine; careful management is required.

  • @react-native-community/async-storage:

    Performance is similar to AsyncStorage, but may not be optimized for newer React Native versions.

  • react-native-encrypted-storage:

    May have slightly slower performance due to encryption overhead, but provides necessary security for sensitive data.

  • react-native-sensitive-info:

    Performance is generally good, but encryption may introduce some latency in read/write operations.

Community Support

  • localforage:

    Strong community support and documentation, widely used in web applications as well.

  • @react-native-async-storage/async-storage:

    Well-supported by the React Native community with frequent updates and active maintenance.

  • redux-persist:

    Strong community backing and extensive documentation, widely used in Redux applications.

  • @react-native-community/async-storage:

    Community support exists, but may not be as active as the newer version; consider transitioning to the latest package.

  • react-native-encrypted-storage:

    Growing community support with good documentation, but may not be as widely adopted as other options.

  • react-native-sensitive-info:

    Active community support with regular updates, especially for security-related improvements.

How to Choose: localforage vs @react-native-async-storage/async-storage vs redux-persist vs @react-native-community/async-storage vs react-native-encrypted-storage vs react-native-sensitive-info
  • localforage:

    Select LocalForage if you need a more advanced storage solution that supports various storage backends (IndexedDB, WebSQL, and localStorage) and provides a promise-based API. It is ideal for applications that require more complex data structures or larger amounts of data.

  • @react-native-async-storage/async-storage:

    Choose this package for a straightforward, community-supported solution for simple key-value storage. It is easy to use and integrates well with React Native applications without additional dependencies.

  • redux-persist:

    Select Redux Persist if you are using Redux for state management and want to persist the Redux store across app sessions. It allows you to save and rehydrate the Redux state, making it easy to maintain user sessions and application state.

  • @react-native-community/async-storage:

    Opt for this package if you are looking for a legacy version of AsyncStorage that may still be in use in some projects. It is essentially the same as the newer version but may not receive updates or support moving forward.

  • react-native-encrypted-storage:

    Use this package when you need to securely store sensitive information such as tokens or user credentials. It provides encryption for data at rest, ensuring that sensitive data is protected from unauthorized access.

  • react-native-sensitive-info:

    Choose this package for a robust solution focused on securely storing sensitive information. It uses the iOS Keychain and Android Keystore for encryption, making it suitable for applications that handle highly sensitive data.

README for localforage

localForage

Build Status NPM version Dependency Status npm jsDelivr Hits minzipped size

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/dist/localforage.js"></script>
<script>localforage.getItem('something', myCallback);</script>

Try the live example.

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

npm install localforage

Support

Lost? Need help? Try the localForage API documentation. localForage API文档也有中文版。

If you're having trouble using the library, running the tests, or want to contribute to localForage, please look through the existing issues for your problem first before creating a new one. If you still need help, feel free to file an issue.

How to use localForage

Callbacks vs Promises

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

localForage has a dual API that allows you to either use Node-style callbacks or Promises. If you are unsure which one is right for you, it's recommended to use Promises.

Here's an example of the Node-style callback form:

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

And the Promise form:

localforage.setItem('key', 'value').then(function () {
  return localforage.getItem('key');
}).then(function (value) {
  // we got our value
}).catch(function (err) {
  // we got an error
});

Or, use async/await:

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

For more examples, please visit the API docs.

Storing Blobs, TypedArrays, and other JS objects

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.

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().

Multiple instances

You can create multiple instances of localForage that point to different stores using createInstance. All the configuration options used by config are supported.

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");

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

TypeScript

If you have the allowSyntheticDefaultImports compiler option set to true in your tsconfig.json (supported in TypeScript v1.8+), you should use:

import localForage from "localforage";

Otherwise you should use one of the following:

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

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:

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 and bower.

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

# Install bower globally if you don't have it:
npm install -g bower

# Replace USERNAME with your GitHub username:
git clone git@github.com: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.

Library Size

As of version 1.7.3 the payload added to your app is rather small. Served using gzip compression, localForage will add less than 10k to your total bundle size:

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

License

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


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