Ionic v3 - show ionic page just once

Hi I’m currently creating a webapp. one of the requirements is to create an intro slider to teach user how the app works, then theres a button to get to the TabsPage which contains login and signup tabs.

I’m trying to just display the intro slider once if its the first time the users viewed the website app.

Is there some kind of set cookie for ionic??

Here’s the source code:

intro.html


    <ion-content>
      <ion-slides #mySlider pager (ionSlideDidChange)="onSlideChange()" [class]="activeSlide">
        <ion-slide *ngFor="let slide of slides">
          <img [src]="slide.image">
          <div class="caption">
            <h2>{{slide.title}}</h2>
            <p>{{slide.description}}</p>
          </div>
          <div class="userNav" *ngIf="activeSlide == 'slideBG2'">
              <button ion-button   (click)="goToSignup() ">signup</button>
              <button ion-button   (click)="goToLogin() ">Login</button>
          </div>
          
        </ion-slide>
      </ion-slides>
      <button *ngIf="activeSlide !== 'slideBG2'" class="nextSlide" (click)="goToSlide()">Next</button>
    </ion-content>

intro.ts

  import { Component, ViewChild } from '@angular/core';
    import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular';
    import { TabsPage } from '../tabs/tabs';
    import { SignupPage } from '../signup/signup';
    import { LoginPage } from '../login/login';
    
    
    @IonicPage()
    
    @Component({
      selector: 'page-intro',
      templateUrl: 'intro.html',
    })
    
    export class IntroPage {
      introSlides: any;
      splash = true;
    
      
      constructor(public navCtrl: NavController, public navParams: NavParams) {
        
      }
    
    @ViewChild('mySlider') slider: Slides;
      public currentindex
      public objectindex
      public activeSlide = 'slideBG0';
    
    
    slides = [
    {
      title: "Juce up your life",
      description: "lorem",
      image: "assets/imgs/intro/slides/slide1.png",
    },
    {
      title: "Anytime, anywhere",
      description: "lorem",
      image: "assets/imgs/intro/slides/slide2.png",
    },
    {
      title: "Get started",
      description: "lorem.",
      image: "assets/imgs/intro/slides/slide3.png",
    }
    ];
    
    
    public onSlideChange() {
      this.currentindex = this.slider.getActiveIndex();
      this.activeSlide = 'slideBG' + this.currentindex;
      // console.log(this.activeSlide);
    } 
    goToSlide() {
      let currentIndex = this.slider.getActiveIndex() + 1;
      this.slider.slideTo(currentIndex, 500);
    }
    
        goToLogin() {
      this.navCtrl.setRoot(TabsPage, {
        tabIndex: 1
      });
    }
    goToSignup()  {
      this.navCtrl.setRoot(TabsPage, {
        tabIndex: 0
      });
    }
        
      ionViewDidLoad() {
        // console.log(this.introSlides);
        setTimeout(() => {
          this.splash = false;
        }, 4000);
      }
     
    }

tabs.ts

import { Component } from '@angular/core';
    import { NavController, NavParams } from 'ionic-angular';
    import { LoginPage } from '../login/login';
    import { SignupPage } from '../signup/signup';
    
    @Component({
      templateUrl: 'tabs.html'
    })
    export class TabsPage {

      tab1Root = SignupPage;
      tab2Root = LoginPage;
      seltabix: number;
    
    
      constructor(public navCtrl: NavController, public navParams: NavParams) {
    
        this.seltabix = this.navParams.get('tabIndex');
      }
    }

tabs.html


    <ion-tabs tabsPlacement="top" [selectedIndex]="seltabix">
      <ion-tab [root]="tab1Root" tabTitle="Signup"></ion-tab>
      <ion-tab [root]="tab2Root" tabTitle="Login"></ion-tab>
    </ion-tabs>

app.component.ts

export class MyApp {
      rootPage:any = IntroPage;
    
      constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
        platform.ready().then(() => {
          statusBar.styleDefault();
          splashScreen.hide();
        });
      }
    }
You could use either localStorage or pouchDB to store information concerning whether or not the introduction has been viewed.

export class MyApp {
      rootPage:any;
    
      constructor() 
     {
         if (localStorage.getItem("IntroductionAlreadyShow")=='Yes')
    {
      this.rootPage=TabsPage;
    }
    else
    {
      this.rootPage=IntroPage;
    }
  }
      }
    }

thanks! I was able to do it using

 import { IonicStorageModule } from '@ionic/storage';
    import { LoadingController } from 'ionic-angular';
    import { Storage } from '@ionic/storage';

    export class MyApp {
 

      rootPage: any = 'Tabs';
      loader: any;
     
      constructor(public platform: Platform, public loadingCtrl: LoadingController, public storage: Storage) {

 
    this.presentLoading();
 
    this.platform.ready().then(() => {
 
      this.storage.get('introShown').then((result) => {
 
        if(result){
          this.rootPage = 'Tabs';
        } else {
          this.rootPage = 'Intro';
          this.storage.set('introShown', true);
        }
 
        this.loader.dismiss();
 
      });
 
    });
 

      }

 

      presentLoading() {

 
    this.loader = this.loadingCtrl.create({
      content: "Authenticating..."
    });
 
    this.loader.present();
     
      }
     
    }

Glad to hear I was able to help!