# Ionic Storage

• Import the storage module into main.ts
• Create a storage service
• Storage service usage examples
  • Setting initial values on application load

more information https://github.com/ionic-team/ionic-storage

# using Angular
npm install @ionic/storage-angular
# otherwise
npm install @ionic/storage

# Import the storage module into main.ts

!! This may be different when using ngModules !!

// src/main.ts
import { IonicStorageModule } from '@ionic/storage-angular';

bootstrapApplication(AppComponent, {
    providers: [
        ...
        importProvidersFrom( IonicStorageModule.forRoot()),
    ],
});

# Create a storage service

From the command line run:

ionic g service services/storage

The add methods to the storage service

// src/services/storage.service.ts
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage-angular';

@Injectable({
    providedIn: 'root'
})
export class StorageService {

    constructor(private storage: Storage) {
        this.init();
    }

    async init() {
        await this.storage.create();
    }

    public async set(key: string, value: any) {
        let result = await this.storage?.set(key, value);
    }

    public async get(key: string) {
        return await this.storage?.get(key);
    }

    public async remove(key: string) {
        let value = await this.storage?.remove(key);
    }

    public async clear(key: string) {
        let value = await this.storage?.clear();
    }

    public async keys(key: string) {
        return await this.storage?.keys();
    }

    // await storage.length()
    // storage.forEach((key, value, index) => { });
    // storage.setEncryptionKey('mykey');
}

# Storage service usage examples

For all examples, make sure you import the StorageService and injected it into the component constructor.

import { StorageService } from './services/storage.service';

export class SomeComponent implements OnInit {
    constructor(private storageService: StorageService) { }
}

# Setting initial values on application load

// src/app/app.component.ts
async ngOnInit() {
    const name = (await this.storageService.get('name')) || 'Paul';
    await this.storageService.set('name', name);
}