localStorage.getItem does not work

Question

Good evening, could you help me? I’m trying to pass the data from one page to another but the field is empty. page 1: where I take the data. page 2: where I want to insert that data.

PAGE 1:

<h1 class="tituloProd">Arroz Tio João integral tipo 1 - 5KG</h1>

PAGE 2:

<p class="descricaoProduto">Descricao aqui<p> 

      $('#btnCompra').click (function(){
       localStorage.setItem('tituloProd', 'arroz');
       $('.descricaoProduto').text(localStorage.getItem('tituloProd'));
  });
});

FULL JAVASCRIPT:

$(document).ready(function(){
$('#btnCompra').click (function(){
  $('#modalProduto').modal('hide'); 
  $('#divInfo').css('display','block'); /* exibe uma div de alerta */
  var titulo = $('#tituloProd').text();
  localStorage.setItem("titulo_produto", titulo);
});

$('#carrinho').click (function(){
  $('#descricaoProduto').text(localStorage.getItem("titulo_produto"));
});
});

Answer 1

So Weslley, by the code you posted, you’re setting and taking the value on the same page and not setting the value on page 1 and taking page 2, the right one would be:

Page 1

HTML - Página 1

<h1 id="tituloProd">Arroz Tio João integral tipo 1 - 5KG</h1>

---

JS - Página 1

//pega o texto
let titulo = $("#tituloProd").text();

// titulo_produto é a chave e titulo o valor que serão armazenados no localStorage   
localStorage.setItem("titulo_produto", titulo);

Page 2

HTML - Página 2

<p id="descricaoProduto"></p>

---

JS - Página 2

$("#btnCompra").click(function(){
  // Aqui obtém o valor através da chave
  $("#descricaoProduto").text(localStorage.getItem("titulo_produto"));
});

I also suggest changing classes by id to set and pick specific values on the page.