Capture and parse a Torage location

Question

I’m looking for data from an API to log in to a page. To log in I need to use the POST method, but it returns the user data already registered. So I’m storing this data in an Storage location to later compose the user data in the restricted page of this system. This is the first part of my code:

 function loga() {

 console.log("Enviando post");

 let usuario = {


   email: document.querySelector("#email").value,
   senha: document.querySelector("#senha").value
 };

 let xhr = new XMLHttpRequest();
 xhr.open("POST", "http://rest/logins", true);
 xhr.setRequestHeader("Content-type", "application/json");

 xhr.addEventListener("load", function () {

   console.log(xhr.responseText);

   if (xhr.status == 200) {

     window.location = "painel.html";
     window.localStorage.setItem('usuario', xhr.responseText);
   }

  if (xhr.status == 500) {

     var dadosInvalidos = document.querySelector('#dados-invalidos');
     dadosInvalidos.classList.remove('invisivel');
   }
 });
 xhr.send(JSON.stringify(usuario));

}

So far so good, the page can already login and I recover this data on the restricted user page. But I can still only see this data in my browser console.

I tried to make another code, in another js file, to recover the data that is this:

var usuario = window.localStorage.getItem('usuario');
usuario.responseText = JSON.parse.responseText;

console.log(usuario);

var id = "";
id += usuario.id;
document.querySelector("#id").innerHTML = id;

But where the id should appear only the word Undefined appears to me. What do I need to do to display the id and other data on my page? Thank you to those who answer.

Answer 1

I already solved That’s all you could do:

var usuario = window.localStorage.getItem('usuario');
usuario = JSON.parse(usuario);

console.log(usuario);

var id = "";
id += usuario.id;
document.querySelector("#id").innerHTML = id;