以角度 2/4 刷新页面时如何存储数据答案

【问题标题】：How to store Data when page refresh in angular 2/4以角度 2/4 刷新页面时如何存储数据
【发布时间】：2019-04-03 01:56:06
【问题描述】：

我是 Angular2/4 的新手。在我的界面中，详细信息获取和保存工作正常。但是当我们刷新界面时，获取的详细信息就消失了。我们如何在刷新后不丢失界面细节的情况下解决这个问题

这是我的 Login.component.ts 文件

   btnlogin() {
    this.message = '';
    this.storage.clear();

    if (this.validate() == true) {
        this._enqService.FetchUserDetails(this.username, this.password).subscribe(userData => {
            if (userData.length == 0)
                this.message = " * Username/Password not correct";

            else {
                userData.forEach(item => {
                    this._loginService._userid = item.UserID;
                    this._loginService._username = item.UserName;
                    //if (this._loginService.selectedshopid == undefined || this._loginService.selectedshopid == 0) {
                    //    this.messages = '* Please Select a Shop';
                    //    return false;
                    //}
                    this._router.navigate(['/enquirydetails']);
                });
            }

        },
            error => {
                console.error(error);
                this.statusMessage = "Problem with the service.Please try again after sometime";
            });
    }
}
 validate(): boolean {
    if (this.username == '' || this.password == '' || this.username == undefined || this.password == undefined) {
        this.message = '* Please enter username/password';
        return false;
    }
    else
        return true;
}

这是我的 logoutcomponent.ts

       constructor(private router: Router, location: Location, private storage: 
     LocalStorageService)
    {
        this.location = location;
        router.events.subscribe((val) => {
            if (this.location.path() != '') {
                this.route = location.path();
            }
        });

    } 
    setUserName()
    {
        //alert('calling setusername');
        this.UserName = this.storage.retrieve('usernamevalue');
    }

    logout() {

        this.router.navigate(['Login']);
        this.storage.clear('boundvalue');
        this.storage.clear('uservalue');
        this.storage.clear();
        //alert(this.storage.retrieve('boundvalue'));
        //alert(this.storage.retrieve('uservalue'));
    } 
    //  ngOnInit() {
   //   this.router.navigate([''])
   //  }
}

【问题讨论】：

（我想要这样，登录的用户详细信息存储在本地存储中，因此如果用户刷新浏览器以及浏览器会话之间的用户将保持登录状态，直到他们注销）
alligator.io/js/introduction-localstorage-sessionstorage

标签： angular typescript angular2-services angular4-router userid

【解决方案1】：

我假设 LocalStorageService 是您自己的库，因此我没有在答案中考虑这一点。

用户成功登录后，将 userId 和 userName 存储在本地存储中，如下所示：

userData.forEach(item => {
    this._loginService._userid = item.UserID;
    this._loginService._username = item.UserName;

    //save to localStorage
    localStorage.setItem(userId, item.UserID);
    localStorage.setItem(userName, item.UserName);

    this._router.navigate(['/enquirydetails']);
});

在您的注销方法中，您从 localStorage 中删除用户值。

logout() {

    this.router.navigate(['Login']);
    this.storage.clear('boundvalue');
    this.storage.clear('uservalue');
    this.storage.clear();
    // delete from localStorage
    localStorage.removeItem(userId);
    localStorage.removeItem(userName);
}

要检查用户是否已登录，我建议使用 Route Guard。在此您可以从 localStorage 获取值并验证用户是否已登录。

localStorage.getItem(userId);
localStorage.getItem(userName);

您可以在此处了解 Route Guard：https://angular.io/guide/router#milestone-5-route-guards

注意：以上只是一个例子，因为我不知道你的完整申请。应该使用 sessionId/userHash 进行适当的用户身份验证。

【讨论】：

【解决方案2】：

我认为您可以使用“sessionstorage”或“localStorage”来存储数据并在以后获取它们以供您使用。

sessionStorage、localStorage 和 Cookies 都用于在客户端存储数据。每个都有自己的存储和到期限制。 sessionStorage：类似于 localStorage，但在浏览器关闭（不是选项卡）时过期。 Cookie：存储必须通过后续请求发送回服务器的数据。

我认为 SessionStorage 适合您的需要。一旦您关闭会话/关闭浏览器，它就会被清除。您可以创建一个 hashMap 并在其中存储所需的信息，并在页面加载时检查它，如果不可用，请尝试使用服务器发送的信息。

【讨论】：