angular6中进行登录的用户信息进行缓存localStorage本地存储

Dear 丶 2022-01-06 12:05 319阅读 0赞

想要在Angular6项目中进行登陆的账户信息缓存，我们需要在登录组件中把用户信息保存到本地通过localStorage，然后直接在另外一个组件中进行调用即可，代码如下：

login.component.ts

this.userID = this.loginData.data.userId;
     this.loginplay = this.loginData.data.userName;
     window.localStorage["userId"] = this.userID;
     window.localStorage["userName"] = this.loginplay;

需要调取账户信息的组件直接调用：

this.titleAlldata = localStorage["userName"];
      this.userId = localStorage["userId"];

在登出账号的时候我们要对用户的缓存信息进行清除处理，即消除本地缓存缓存localStorage

saveBtn1(){
        this.http.post(this.api+'/v1/logout',{},{withCredentials: true}).subscribe(data=>{
          this.ErrorData = data;
          if(this.ErrorData.code == 10000){
            window.localStorage.removeItem("userName");
            window.localStorage.removeItem("userId");
            this.router.navigate(['login']);
          }else if(this.ErrorData.code == 10005){
            this.router.navigate(['login']);
          }else{
            this.alertTitle = this.ErrorData.message;
            $('.zmalert1').fadeIn();
          }      
        },error =>{
          $('.ErrorAlert1').fadeIn().delay(1500).fadeOut();
        })
      }

这样就可以吧账户信息在登陆的时候存到本地缓存，然后登出的时候进行消除缓存。

发表评论取消回复

表情：

评论列表（有 0 条评论，319人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中使用localStorage存储信息

一什么是localStorage 对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localSto...

一时失言乱红尘/ 2024年04月17日 17:36/ 0 赞/ 66 阅读

相关使用vuex存储用户登录信息

使用vuex存储用户登录信息本文讲解如何使用vuex，存储用户登录的信息。原理讲解存储信息首先，在我们的store.js文件中定义state:

浅浅的花香味﹌/ 2024年03月16日 14:40/ 0 赞/ 79 阅读

相关 Vue中如何进行本地存储（LocalStorage）

Vue中的本地存储（LocalStorage）操作指南在Vue.js应用程序中，本地存储（LocalStorage）是一个强大的工具，用于在浏览器中保存和检索数据。它允

╰+攻爆jí腚メ/ 2023年10月16日 12:12/ 0 赞/ 46 阅读

相关 vue中使用localStorage存储信息

一、什么是localStorage 对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStora

野性酷女/ 2022年11月03日 05:29/ 0 赞/ 213 阅读

相关本地存储localStorage的用法总结

一、什么是localStorage？ > 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问

悠悠/ 2022年06月11日 05:13/ 0 赞/ 171 阅读

相关 jdbc进行用户信息管理

import java.sql.Connection; import java.sql.DriverManager; import java.sql.P

深碍√TFBOYSˉ_/ 2022年06月07日 13:58/ 0 赞/ 155 阅读

相关 Vue_localStorage本地存储

html 的localStroage 可以将用户输入的信息存储在本地浏览器中在控制台输入：window 可以看到window对象的属性和方法 //设置local

快来打我*/ 2022年05月22日 13:11/ 0 赞/ 237 阅读

相关使用localStorage本地缓存数据

一.获取对象 var storage = window.localStorage; if(！storage){ alert("浏览器不支持lo

傷城~/ 2022年05月11日 08:52/ 0 赞/ 255 阅读

相关 js 清除本地缓存 localStorage

1.创建缓存 localStorage.setItem('doEdit', this.doEdit); 2.读取缓存 localStora

￡神魔★判官ぃ/ 2022年03月28日 14:26/ 0 赞/ 1650 阅读

相关 angular6中进行登录的用户信息进行缓存localStorage本地存储

想要在Angular6项目中进行登陆的账户信息缓存，我们需要在登录组件中把用户信息保存到本地通过localStorage，然后直接在另外一个组件中进行调用即可，代码如下： l

Dear 丶/ 2022年01月06日 12:05/ 0 赞/ 320 阅读