Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

So i have create a method which will be called when user click on login button. On this method i also store data on session storage which store the name and role of a user. So when i try to get data from session Storage i am getting [object Object] in console. How to get data from it.

onSubmit() {
    this.submitted = true;
    this.loaderService.display(true);
    try {
      if (!this.loginForm.invalid) {
        this.login
          .Login(this.f.UserName.value, this.f.Password.value)
          .pipe(first())
          .subscribe(
            (data: Login) => {
              if (data.token) {
                this.loaderService.display(false);
                let user = this.jwtHelperService.getDecodeAccessToken(
                  data.token
                sessionStorage.setItem('userData', user);
                console.log(user);
                this.router.navigate(['/home']);
              } else {
                this.loaderService.display(false);
                this.loginMessage = data.msg;
                this.router.navigate(['/home']);
            (error) => {
              this.loaderService.display(false);
              this.loginMessage = error.error.error_description;
              console.log(error);
      } else {
        this.loaderService.display(false);
    } catch (error) {
      this.loaderService.display(false);
The output produced by the Console.log(user) in above method is
{sub: "shiv@gmail.com", Roles: Array(1), exp: 1596814970, iat: 1596796970}
   Roles: ["System-Admin"]
  exp: 1596814970
   iat: 1596796970
  sub: "shiv@gmail.com"
   __proto__: Object
userInfo: any = sessionStorage.getItem('userData');
So when  i try to console.log(userInfo) i am getting [object Object]
So how to extract sub and Role from this.
Sessionstorage (aswell as localstorage) stores key/value pairs of strings(!), which means you can't simply store objects there and retrieve them like you would for example with an array.
To store objects in either storage:
sessionStorage.setItem('object', JSON.stringify(obj))
-> this converts your object to a JSON string(!) and stores it under the key object.
To retrieve it back you need to parse the JSON string back to a object so you can access the properties as usual.
var jsonStringObj = sessionStorage.getItem('object'); // This is the json string we stored
var obj = JSON.parse(jsonStringOBJ); // this is your object
console.log(obj.department); // access properties as usual
this one working for me
  department = JSON.parse(window.sessionStorage.getItem('empDetails')).department;
  constructor() { }
  ngOnInit() {
    console.log(this.department);
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.