你如何让浏览器知道用户已经查看了特定页面 - Ioinic

Question

您好，我目前正在创建 PWA。其中一项要求是创建一个介绍性滑块来教用户该应用程序如何工作，然后有一个按钮可以进入包含登录和注册选项卡的 TabsPage。

如果用户是第一次查看网站应用程序，我尝试只显示一次介绍滑块。

是否有某种针对 ionic 的 set cookie？

这是源代码：

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

Answer 1

使用 LocalStorage 引用 https://www.w3schools.com/jsref/prop_win_localstorage.asp

例如。

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

Answer 2

谢谢！我能够使用

做到这一点

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

  }

}

你如何让浏览器知道用户已经查看了特定页面 - Ioinic

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

javascript

setcookie

ionic3

angular5