Saving form data to local storage but unable to reterive it/

Ionic Framework ionic-v3
21

I’m not demotivating anybody here, I just asked you to relax don’t bother about the code and about people who codes in a different way.
Everyone is different in their own terms.
I’m here to get myself clear & truthfully I’m a beginner who is trying to learn from videos and forums like this, what you expect, a expert asking for help here??
I’ll improve surely, but only if you senior guys are there to help!!
Where would we go and ask for help??
So I request you not to take it the wrong way!!

22

@rapropos Probably just has a bad day. Everyone is triggered once in a while.

With that said:

  1. install sqlite: ionic cordova plugin add cordova-sqlite-storage.
  2. install the storage module: npm install --save @ionic/storage.
  3. Add it to your project:
import { IonicStorageModule } from '@ionic/storage';

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

Then use it in your home.ts like this:

import { Component } from '@angular/core';
import { IonicPage, Platform } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  schoolInfo: SchoolInformation;

  constructor(public plt: Platform,
              public storage: Storage) {
    this.schoolInfo = this.initSchoolInfoValues();
    this.plt.ready().then((res) => {
      this.loadSchoolInfoValues().then(data => {
        if(data) this.schoolInfo = data;
      }).catch(err => console.log(err));
    }).catch(err => console.log(err));
  }

  private initSchoolInfoValues(): SchoolInformation {
    return {
      schoolName: '',
      direction: '',
      address: ''
    }
  }

  private loadSchoolInfoValues(): Promise<SchoolInformation> {
    return this.storage.get(STORAGE_SCHOOLINFO);
  }

  private saveSchoolInfoValues(data): Promise<any> {
    return this.storage.set(STORAGE_SCHOOLINFO, data);
  }
}

interface SchoolInformation {
  schoolName: string;
  direction: string;
  address: string;
  // TODO: Add all the other values that you need here typecasted.
  // Also extend all the other functions to cover your needs.
}

const STORAGE_SCHOOLINFO = "storageSchoolInfo";

And your home.html can look something like this:

<ion-header>
  <ion-navbar>
    <ion-title>
      School Info Page
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label color="primary">
        School name:
      </ion-label>
      <ion-input placeholder="School" [(ngModel)]="schoolInfo.schoolName">
      </ion-input>
    </ion-item>
    <ion-item>
      <ion-label color="primary">
        Direction:
      </ion-label>
      <ion-input placeholder="Direction" [(ngModel)]="schoolInfo.direction">
      </ion-input>
    </ion-item>
    <ion-item>
      <ion-label color="primary">
        Address:
      </ion-label>
      <ion-input placeholder="Address" [(ngModel)]="schoolInfo.address">
      </ion-input>
    </ion-item>
  </ion-list>
</ion-content>

<ion-footer>
  <button ion-button full (click)="saveSchoolInfoValues(schoolInfo)">
    Save School Info
  </button>
</ion-footer>

I didn’t give your everything, so that you have to figure some stuff out for yourself.

Notice that that is what triggered Robert. Most experienced Developers hate it when people don’t do enough research and just post their questions without thinking. (I don’t know if you did enough research, to me it seemed like you very genuinely stuck which is why I try to help you).

Also notice that I used some ‘advanced’ concepts like an interface. Educate your self on this. And lastly I would put my logic in a provider. So instead of having all these functions in home.ts I would delegate it to a couple of providers (and a constants.ts file for the constant at the bottom).

If you want to have a look at an advanced Ionic project google for “Ionic Mosum”. It’s a wheather app written in Ionic and you can learn a ton from it.

Furthermore if you are willing to spend money, check out the courses by @joshmorony. They are great!

2 Likes
23

Thank you @Hesters I have done research and am stuck from past 4-5 days. I’ll try to figure the above.
And surely I’m on my way to get better just by learning from you guys.
And I’ve seen Josh and his videos, it’s very helpful for beginners like us.
Thanks again for considering my problem a genuine one.
Have a nice day!!

1 Like
24

And surely I’m on my way to get better

What really helps me is building the code from the bottom slowly adding stuff small pieces at a time and continuously check if the code still works. And if not, revert and slice the piece I added. This way checking all my assumptions. If I add big chunks, then these are chunks were tested by myself before.

And if I am lost, I start a blank project and add the “offending” code to see how it works.

Takes a while, but taught me a lot

2 Likes
25

This is a great approach to code clean and code clear.
I’ll follow that for sure!

26

Besides thinking that you developers are giants among us, and so helpful, it is also great fun to see when you all get a little irritated. Adds some fire, and makes my day.:laughing:

From a novice with no idea of coding.

1 Like