Eric Foster d5378345de connection between front end and database | 6 years ago | |
---|---|---|
.. | ||
dist | 6 years ago | |
scripts | 6 years ago | |
LICENSE | 6 years ago | |
README.md | 6 years ago | |
circle.yml | 6 years ago | |
package.json | 6 years ago |
A simple key-value Storage module for Ionic apps based on LocalForage, with out-of-the-box support for SQLite. This utility makes it easy to use the best storage engine available without having to interact with it directly. Currently the ordering is SQLite, IndexedDB, WebSQL, and LocalStorage.
One reason we prioritize SQLite is because of some OS-dependent issues with storage in the browser in native apps. As a major example, iOS will currently clear out Local Storage (and IndexedDB it's been shown) when the device runs low on memory. To avoid that, a file-based storage approach with SQLite will retain all your data.
If you want to perform arbitrary SQL queries and have one of the best storage options around, we recommend using the Ionic Native SQLite plugin directly. This engine no longer supports the query
feature underneath as it was not portable and only worked for SQLite anyways.
For those coming from Ionic pre RC.0, here is more insight in to the reason for us moving to this module: https://github.com/ionic-team/ionic/issues/8269#issuecomment-250590367
To use this in your Ionic /Angular apps, either start a fresh Ionic project which has it installed by default, or run:
npm install @ionic/storage
If you'd like to use SQLite as a storage engine, install a SQLite plugin (only works while running in a simulator or on device):
cordova plugin add cordova-sqlite-storage --save
Then edit your NgModule declaration in src/app/app.module.ts
to add IonicStorageModule
as an import:
import { IonicStorageModule } from '@ionic/storage';
@NgModule({
declarations: [
...
],
imports: [
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
...
],
providers: [
...
]
})
export class AppModule { }
Now, you can easily inject Storage
into a component:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public storage: Storage) {
}
}
To make sure the storage system is ready before using, call Storage.ready()
. You must be
on 1.1.7 or greater to use the ready()
method.
storage.ready().then(() => {
});
To set an item, use Storage.set(key, value)
:
this.storage.set('name', 'Mr. Ionitron');
To get the item back, use Storage.get(name).then((value) => {})
since get()
returns a Promise:
this.storage.get('name').then((name) => {
console.log('Me: Hey, ' + name + '! You have a very nice name.');
console.log('You: Thanks! I got it for my birthday.');
});
To remove the item, use Storage.remove(key).then(() => { })
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
import { Storage } from '@ionic/storage';
@NgModule({
declarations: ...,
imports: [
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: ['indexeddb', 'sqlite', 'websql']
})
],
bootstrap: ...,
entryComponents: ...,
})
export class AppModule { }
When you're ready to release a new version, run the following commands: