CODEWITHSUNDEEP
javascripthtmlangulartypescriptangular6
Igor Shvets
Igor Shvets

Reputation: 547

How to remember the value of a variable after reloading the page?

I want to memorize the value of the variable loggedIn, because the value of the corresponding function in appComponent.html depends on its value.Tell me please how to implement it?

teamplate of app component:

            <li class="nav-item">
                <a class="btn btn-outline-success"
                   [class.btn-outline-success]="!this.loggedInService.loggedIn"
                   [class.btn-outline-danger]="this.loggedInService.loggedIn"
                   (click)="this.loggedInService.loggedIn ? logout() : logIn()">
                    {{this.loggedInService.loggedIn? 'Exit' : 'Enter'}}
                </a>
            </li>

code of app component:

export class AppComponent implements OnInit {
    constructor(private loggedInService: LoggedinService,
                private router: Router) {
    }

    ngOnInit() {
    }

    logIn(): void {
        this.loggedInService.login();
        if (this.loggedInService.loggedIn) {
            let redirect = this.loggedInService.redirectUrl ? this.loggedInService.redirectUrl :
                '/gallery';
            this.router.navigate([redirect]);
        }
    }

    logout(): void {
        this.loggedInService.logout();
        this.router.navigate(['/']);
    }
}

LoggedinService:

export class LoggedinService implements OnInit {
    redirectUrl: string;
    loggedIn: boolean = false;
    constructor() {}

    ngOnInit(): void  {}

    login(): boolean {
        localStorage.setItem('login', 'true');
        return this.loggedIn = true;
    }

    logout(): boolean {
        localStorage.removeItem('login');
        return this.loggedIn = false;
    }
}

Upvotes: 1

Views: 594

Answers (3)

SiddAjmera
SiddAjmera

Reputation: 39442

You've already stored login after the user logged in in the LoggedinService's login method.

Now even if you reload the page, you will be able to get it from there using:

// Add this property in your app.component.ts
loggedIn = localStorage.getItem('login');

This will return 'true' if the user was logged in before the page reload.

You can then create these classes:

.btn-outline-success {
  background: 'green';
}

.btn-outline-danger {
  background: 'green';
}

And then in your app.component.html dynamically use these classes using [ngClass] syntax like this:

<li class="nav-item">
  <a 
    class="btn" 
    [ngClass]="loggedIn === 'true' ? 'btn-outline-success': 'btn-outline-danger'"
    (click)="this.loggedInService.loggedIn ? logout() : logIn()">
    {{this.loggedInService.loggedIn? 'Exit' : 'Enter'}}
  </a>
</li>

Upvotes: 1

Gafar Popoola
Gafar Popoola

Reputation: 21

For Angular 6 run:

npm install @ngx-pwa/local-storage@6

For Angular 5 run:

npm install @ngx-pwa/local-storage@5

add this to your app module:

imports: [ LocalStorageModule, //other module imports here ],

LoginService

export class LoggedinService implements OnInit {
    redirectUrl: string;
    loggedIn: boolean = false;
    constructor(private localStorage: LocalStorage) {}

    ngOnInit(): void  {}

    login(): boolean {
        this.localStorage.setItem('login', 'true').subscribe(res => {
          this.loggedIn = true;
        });
        return this.loggedIn = true;
    }

    logout(): boolean {
        this.localStorage.removeItem('login').subscribe(res => {
          this.loggedIn = false;
        });
        return this.loggedIn = false;
    }
}

Don't forget to add the import

import { LocalStorage } from "@ngx-pwa/local-storage";

check the repository here

Upvotes: 1

Nurbol Alpysbayev
Nurbol Alpysbayev

Reputation: 21911

Use localstorage

Example:

localStorage.setItem('loggedIn', loggedIn);

Upvotes: 3

Related Questions