【问题标题】：How to remember the value of a variable after reloading the page?重新加载页面后如何记住变量的值？
【发布时间】：2019-03-22 01:11:09
【问题描述】：

我想记住变量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;
    }
}

【问题讨论】：

您可能想研究 cookie：D
请注意，您的策略存在巨大的安全风险。如果您依赖于客户端的loggedIn 值是真还是假，这可能很容易被渗透者伪造，并且可能发生不需要的事情，例如身份盗用、数据泄露等。你可能不想要那个。

标签： javascript html angular typescript angular6

【解决方案1】：

使用localstorage

例子：

localStorage.setItem('loggedIn', loggedIn);

【讨论】：

【解决方案2】：

用户登录LoggedinService的login方法后，你已经存储了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>

【讨论】：

我需要在重载后保存按钮样式，它们取决于变量的值，如何实现？
@IgorShvets，我已经相应地更新了我的答案。请检查是否有帮助。
@SiddAjmera 你不能在模板中使用this

【解决方案3】：

对于 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";

检查存储库here

【讨论】：