Scribd
Upload
62 views6 pages

Ionic Storage

Storage provides a simple way to store key-value pairs and JSON objects by using the best available storage engine for the platform, such as SQLite for native apps and IndexedDB for web. To use Storage, install the SQLite plugin if needed, install the @ionic/storage package, import and inject Storage, then use its methods like set, get, and remove to interact with stored data. Storage handles choosing the appropriate storage method transparently.

Uploaded by

irenafemic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
62 views6 pages

Ionic Storage

Storage provides a simple way to store key-value pairs and JSON objects by using the best available storage engine for the platform, such as SQLite for native apps and IndexedDB for web. To use Storage, install the SQLite plugin if needed, install the @ionic/storage package, import and inject Storage, then use its methods like set, get, and remove to interact with stored data. Storage handles choosing the appropriate storage method transparently.

Uploaded by

irenafemic
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

IONIC STORAGE

Storage is an easy way to store key/value pairs and JSON objects. Storage uses a variety of storage engines
underneath, picking the best one available depending on the platform.When running in a native app context,
Storage will prioritize using SQLite, as it's one of the most stable and widely used file-based databases, and avoids
some of the pitfalls of things like localstorage and IndexedDB, such as the OS deciding to clear out such data in
low disk-space situations.When running in the web or as a Progressive Web App, Storage will attempt to use
IndexedDB, WebSQL, and localstorage, in that order.

Usage

First, if you'd like to use SQLite, install the cordova-sqlite-storage plugin:

ionic cordova plugin add cordova-sqlite-storage

Next, install the package (comes by default for Ionic apps > Ionic V1):

npm install --save @ionic/storage

Next, add it to the imports list in your NgModule declaration (for example, in src/app/app.module.ts):

import { IonicStorageModule } from '@ionic/storage';

@NgModule({
declarations: [
// ...
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
// ...
],
providers: [
// ...
]
})
export class AppModule {}

1
Finally, inject it into any of your components or pages:

import { Storage } from '@ionic/storage';

export class MyApp {

constructor(private storage: Storage) { }

...

// set a key/value
storage.set('name', 'Max');

// Or to get a key/value pair


storage.get('age').then((val) => {
console.log('Your age is', val);
});
}

Configuring Storage

The Storage engine can be configured both with specific storage engine priorities, or custom configuration options
to pass to localForage. See the localForage config docs for possible options:
https://github.com/localForage/localForage#configuration

Note: Any custom configurations will be merged with the default configuration

import { IonicStorageModule } from '@ionic/storage';

@NgModule({
declarations: [...],
imports: [
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: ['indexeddb', 'sqlite', 'websql']
})
],
bootstrap: [...],
entryComponents: [...],
providers: [...]
})
export class AppModule { }

2
Instance Members
driver
Get the name of the driver being used.

Returns: string|null

Name of the driver

ready()
Reflect the readiness of the store.

Returns: Promise<LocalForage>

Returns a promise that resolves when the store is ready

get(key)
Get the value associated with the given key.

Param Type Details

key any
the key to identify this value
Returns: Promise

Returns a promise with the value of the given key

set(key, value)
Set the value for the given key.

Param Type Details

key any
the key to identify this value
value any the value for this key

Returns: Promise

Returns a promise that resolves when the key and value are set

remove(key)
Remove any value associated with this key.

Param Type Details

key any
the key to identify this value
Returns: Promise

Returns a promise that resolves when the value is removed

clear()
Clear the entire key value store. WARNING: HOT!

3
Returns: Promise

Returns a promise that resolves when the store is cleared

length()
Returns: Promise

Returns a promise that resolves with the number of keys stored.

keys()
Returns: Promise

Returns a promise that resolves with the keys in the store.

forEach(iteratorCallback)
Iterate through each key,value pair.

Param Type Details

iteratorCallback any a callback of the form (value, key, iterationNumber)

Returns: Promise

Returns a promise that resolves when the iteration has finished.

IZDVOJENI PRIMER

// set a key/value
storage.set('name', 'Max');

// Or to get a key/value pair


storage.get('age').then((val) => {
console.log('Your age is', val);
});

4
Using Storage in Ionic 2+
Ionic’s LocalStorage is now called simply Storage in Ionic 2+ and behind the scenes Storage decides the best
method to store the data. On mobile phones for example, SQLite is the preferred storage method. IndexedDB,
WebSQL or localstorage is used in browsers for Progressive Web Apps.

Storage is the easiest way to save key/value pairs of data or Json objects. Here’s how to use it in your Ionic 2+
apps:

Installation
First, install the SQLite Cordova plugin with this command:

$ cordova plugin add cordova-sqlite-storage --save

Then install Storage. You can skip this step if you’re using a version or Ionic 2 greater than RC0, because Storage
is now included automatically:

$ npm install --save @ionic/storage

Importing + Injecting
Import it in the appropriate module, the app root module for example:

Module: app.module.ts

...
import { IonicStorageModule } from '@ionic/storage';

@NgModule({
imports: [
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
...
],
...
})

Then inject it in the components that need it:

Component: team.ts

...
import { Storage } from '@ionic/storage';

export class TeamPage {

constructor(public navCtrl: NavController, public storage: Storage) { }

// ...
}

5
Usage
Now you’re ready to start using Storage’s set, get and remove methods. Let’s use a simple example where we have
three methods, one that sets a team as a favorite, one that removes the team from the favorites and one that checks
if a team is a favorite:

Component: team.ts

fav() {
this.storage.set(`team ${ this.teamId }`, this.teamName);
this.favorite = true;
}

removeFav() {
this.storage.remove(`team ${ this.teamId }`);
this.favorite = false;
}

isFav() {
this.storage.get('team ' + this.teamId).then((value) => {
value ? this.favorite = true : this.favorite = false
}).catch(() => this.favorite = false);
}

In that example, the isFav method can be used in the ionViewWillEnter page lifecycle hook to determine if a team
is already a favorite.

You might also like