Estou buscando os dados de uma API para fazer o login em uma página. Para fazer o login eu preciso usar o método POST, mas ele me devolve os dados do usuário já cadastrado. Então estou armazenando estes dados numa local storage para posteriormente compor os dados do usuário na página restrita deste sistema. Esta é a primeira parte do meu código:

 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));

}

Até aqui tudo bem, a página já consegue fazer o login e eu recupero esses dados na página restrita do usuário. Porém ainda só consigo ver esses dados no console do meu navegador.

Tentei fazer um outro código, em outro arquivo js, para recuperar os dados que é este:

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

console.log(usuario);

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

Mas onde deveria aparece o id só me aparece a palavra undefined. O que preciso fazer para exibir o id e os outros dados na minha página? Obrigado a quem responder.