Как запомнить значение переменной после перезагрузки страницы?

Question

Я хочу запомнить значение переменной loggedIn, потому что значение соответствующей функции в appComponent.html зависит от ее значения. Скажите, пожалуйста, как это реализовать?

teamplateкомпонента приложения:

            <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>

код компонента приложения:

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(['/']);
    }
}

Вход в систему:

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

Answer 1

Вы уже сохранили login после того, как пользователь вошел в метод LoggedinService login.

Теперь, даже если вы перезагрузите страницу, вы сможете получить ее оттам используя:

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

Это вернет 'true', если пользователь вошел в систему до перезагрузки страницы.

Затем вы можете создать эти классы:

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

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

А затем в вашем app.component.html динамически используйте эти классы, используя синтаксис [ngClass], подобный следующему:

<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>

Answer 2

Для прогона Angular 6:

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

Для прогона Angular 5:

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

добавьте это в свой модуль приложения:

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

Сервис входа в систему

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

Не забудьте добавить импорт

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

проверить хранилище здесь

Answer 3

Использование localstorage

Пример:

localStorage.setItem('loggedIn', loggedIn);