How to get the value from the localStorage object key? Angular-CodePudding

I need your help. In localStorage I have the object in the example. I am using Angular. I need to extract the value of the first linkedinMail key. I tried to do it in several ways, but as a result in the console, I get the first curly brace {

Object fron localStorage

{"linkedinMail": "mail.com", "password": "123"}

The first option:

public linkedinEmailBody: any

const emailLoginLinkedin = localStorage.getItem('credsForJetLeadBE')
let [key, value] = Object.entries(emailLoginLinkedin)[0];
this.linkedinEmailBody = value;
console.log(this.linkedinEmailBody) // result: `{`

The second option:

public linkedinEmailBody: any

const emailLoginLinkedin = localStorage.getItem('credsForJetLeadBE')
const valueEmailLinkedin = Object.values(emailLoginLinkedin)[0];
this.linkedinEmailBody = valueEmailLinkedin
console.log(this.linkedinEmailBody) // result: `{`

The third option

public linkedinEmailBody: any

const emailLoginLinkedin = localStorage.getItem('credsForJetLeadBE')
const valueEmailLinkedin = emailLoginLinkedin[Object.keys(emailLoginLinkedin)[0]];
this.linkedinEmailBody = valueEmailLinkedin
console.log(this.linkedinEmailBody) // result: `{`

When I use standard JS, the value of the linkedinMail field comes to me fine, instead of {. What am I doing wrong? Thank you very much

CodePudding user response：

LocalStorage, sessionStorage stores strings. To change it to it original type, you have to parse it like this:

const emailLoginLinkedin = JSON.parse(localStorage.getItem('credsForJetLeadBE'));

After that you can use any way you want to retrieve the first key,value pair.

CodePudding user response：

Local storage stores the value as a string, so you need to use

JSON.parse(localStorage.getItem('credsForJetLeadBE'))

to get the actual object.

This should work.

const emailLoginLinkedin = JSON.parse( // (1)
    localStorage.getItem("credsForJetLeadBE")
);

let [key, value] = Object.entries(emailLoginLinkedin)[0];
let linkedinEmailBody = value;
console.log(linkedinEmailBody);

In local storage, you have a JSON string containing the object you're storing.

In order for JavaScript to be able to work with it as an object, you need to call JSON.parse() on it.

CodePudding user response：

I'll provide you a whole example, because you not only could have a problem in the GET, but in the SET.

I'm not going to use the "easy way", in order you to understand better, and then (when it works fine), you can go wherever complicated you want (destructuring, ...).

// Initial Declaration
interface IEmailLoginLinkedin = {
   linkedinMail: string; 
   password: string;
}

emailLoginLinkedin: IEmailLoginLinkedin;

// Initialize 
 this.emailLoginLinkedin =  { linkedinMail: 'mail.com',password: '123' };


// Set value
this.setEmailLoginLinkedin(this.emailLoginLinkedin);

// Get values
const emailLoginLinkedinObject: IEmailLoginLinkedin|null  = this.getEmailLoginLinkedin();

let linkedinMail: string;
let password: string;

if (emailLoginLinkedinObject) {

   linkedinMail= emailLoginLinkedinObject.linkedinMail;
   password = emailLoginLinkedinObject.password;

   // Or the same but with 'destructuring':({linkedinMail, password}) = emailLoginLinkedinObject;

} else {
console.log('emailLoginLinkedin not set in the localStorage');
}

And the methods for the access to the localStorage:

 
// Serialize and STORE the emailLoginLinkedin in localstore:
setEmailLoginLinkedin(emailLoginLinkedin: IEmailLoginLinkedin){
   const emailLoginLinkedinString:string = JSON.stringify( emailLoginLinkedin );
   localStorage.setItem('emailLoginLinkedin', emailLoginLinkedinString);
}

----
 
// READ the emailLoginLinkedin from localstorage and Deserialize
getEmailLoginLinkedin(): IEmailLoginLinkedin|null {
 
   const emailLoginLinkedinString:string|null =  localStorage.getItem('emailLoginLinkedin');
 
   if( emailLoginLinkedinString ){
       return JSON.parse(emailLoginLinkedinString);
   } else {
       return null;
   }
 
}