Skip to content

A local storage wrapper for both react-native(AsyncStorage) and browser(localStorage).

License

Notifications You must be signed in to change notification settings

abdelav/react-hybrid-storage

Repository files navigation

react-hybrid-storage Build Status

A local storage wrapper for both react-native(AsyncStorage) and browser(localStorage).

Features

  • Promise based for async load.
  • Size controlling.
  • Auto expiring.
  • Remote data auto syncing.
  • Get a batch data in one query.

Install

in react-native environment require react-native version >= 0.13

npm install react-hybrid-storage --save OR yarn add react-hybrid-storage

Usage

Import

import Storage from 'react-hybrid-storage';

Do not use require('react-hybrid-storage'), which would cause error in react-native version >= 0.16.

Init

import Storage from 'react-hybrid-storage';
import { AsyncStorage } from 'react-native'; // Don't import if the target is web

const storage = new Storage({
  size           : 1000, // maximum capacity, default 1000 
  storageBackend : AsyncStorage, // Use AsyncStorage for RN, or window.localStorage for web.
  defaultExpires : 1000 * 3600 * 24, // expire time, default 1 day(1000 * 3600 * 24 milliseconds).
  enableCache    : true, // cache data in the memory. default is true.
  sync           : {}, 
})	

// I suggest you have one(and only one) storage instance in global scope.

// for web
window.storage = storage;

// for react-native
global.storage = storage;

Save

  • key : should be an unique string value and are permanently stored unless you remove, do not use underscore("_") in key!
  • data : any valid JSON object to save.
  • expires : expire time in milliseconds, if set to null, then it will never expire.
storage.save({
  key  : 'auth',
  data : {
    token   : 'some access token',
    refresh : 'some refresh token',
  },
  expires : 1000 * 3600,
});

Load

  • key : a string value (key) that we want to load.
  • autoSync : if data not found or expired, then invoke the corresponding sync method.
  • syncInBackground : if data expired, return the outdated data first while invoke the sync method.
  • syncParams : you can pass extra params to sync method.
try {
  const { token, refresh } = await storage.load({
    key              : 'auth',
    autoSync         : true,
    syncInBackground : true,
    syncParams       : {},
  });

  console.log(token);
} catch (error) {
  // Do something
} 

Credits

This library is a rewrite of react-native-storage originally created by sunnylqm. We really appreciate the effort he did solving the issue we face using localstorage and async storage in multiplatform enviorments.

License

MIT