How do you let the browser know that the user already viewed the specific page in - Ioinic

Question

Hi I'm currently creating a PWA. 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();
    });
  }
}

Possible duplicate: https://stackoverflow.com/questions/31139365/can-you-use-cookies-in-a-cordova-application — Clockwork, Sep 09 '18 at 12:56
maybe its not the best approach but using a variable in AsyncStorage for checking out that if its "App OPENING" for the first time then show the page of intro else check the session and proceed forward! — Rizwan Atta, Sep 09 '18 at 12:58

score 1 · Accepted Answer · answered Sep 10 '18 at 01:34

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();

  }

}

score 0 · Answer 2 · answered Sep 09 '18 at 16:47

0

use LocalStorage ref https://www.w3schools.com/jsref/prop_win_localstorage.asp

ex.

if(!localStorage.getItem("sliderShown")){
   //Show your Introslider
   localStorage.setItem("sliderShown", "true");
}

answered Sep 09 '18 at 16:47

Parvej Mallick

467
1
7
11

How do you let the browser know that the user already viewed the specific page in - Ioinic

2 Answers2