Setting up a page that only appears once for new users

Ionic Framework
1

Hi there, I would like to make a page to be viewed only for FIRST TIME USERS when starting the app.

Did lots of research but couldn’t find any helpful ones.

Please assist. Any help is appreciated.

Thanks!

2 Likes
2

You can use localstorage variable as below:

  1. Check variable value by localStorage.getItem('PageDisplayed'), if it is null or empty then display first page
  2. After Page is displayed, use localStorage.setItem('PageDisplayed', true) and then redirect to another page.
  3. Next time, it will not be shown because variable is set to true.
3

Do I replace (‘PageDisplayed’) with my page name?

4

Hi, I don’t speak English very well but I will try it.

As niravparsana94 said, you can use localStorage for check if page it was showed.

If you use Ionic with Angular then in your ngOnInit you must set localStorage when page show:

    ngOnInit() {

        const checkView = localStorage.getItem('pageDisplayed');
        if (checkView) {
            // here redirect
        }
        localStorage.setItem('pageDisplayed', 'ok');
   }

then if exist localStorage item checkView you can redirect to another page

Greetings from Chile

1 Like
5

It doesn’t matter what you keep, it’s variable afterall. You can keep any name as you want!

6

Don’t use localStorage for this. In fact, don’t use localStorage for anything. It does not provide any persistence guarantee. Ionic Storage does, and is just as easy to use.

1 Like
7

May I know why is better to use ionic storage and not local storage?

8

As @rapropos said, persistence is the reason you should use ionic storage.

1 Like
9

How do I implement ionic storage and use it to make my page only displayed for first time users ?

10

Add something like this on device ready in app component

If (storage value is empty){
show new user welcome page and add a value in storage } else {
show user first page }

11

Thank you so much for replying, so I just add the if variable inside my app component after installing ionic storage?

12

Add it inside device ready if you want it to happen as soon as the app opens up