Add multiple products in one sessionStorage

Question

I add the product through a select, but when I try to add another it erases what is in the sessionStorage current. How do I add the two?

I have the select in html that brings the product, and when it is clicked it adds the following content:

$('#produto_pedido').on('change', function()
{
filterLimit++;
let id_produto = $('#produto_pedido option:selected').val();
let nome_produto = $('#produto_pedido option:selected').text();
let itemHTML = "";

$('.btn-finalizar-pedido').css('display','none');
$('.produto_selecionado').css('display','block');

itemHTML += "<h3>Informações do Produto</h3>";
itemHTML += "<input type='hidden' name='id_produto' id='id_produto' value='" 
 + id_produto + "' />";
itemHTML += "<div class='form-group'>";
itemHTML += "<label class='control-label col-md-3 col-sm-3 col-xs-12' 
for='first-name'>Nome do Produto<span class='required'>*</span>";
itemHTML += "</label>";
itemHTML += "<div class='col-md-4 col-sm-6 col-xs-12'>";
itemHTML += "<input type='text' name='nome_produto' id='nome_produto' 
placeholder='Digite o nome do produto' class='form-control' value='" + 
nome_produto + "' readonly/>";
itemHTML += "</div>";
itemHTML += "</div>";

$('.produto_selecionado').html(itemHTML);

});

 /*depois quando clica no botão salvar ele grava no session storage*/

$(document).on("click", ".btn-salvar-produto-pedido", function () {

 let produto_pedido = $('#produto_pedido').val();
let frete_pedido = $('#valor_frete').val();
let comprimento_pedido = $('#comprimento_pedido').val();
let largura_pedido = $('#largura_pedido').val();
let espessura_pedido = $('#espessura_pedido').val();
let novo_preco_produto = $('#preco_produto_pedido').val();
let quantidade_pedido = $('#quantidade_pedido').val();
let nome_produto = $('#produto_pedido').find(':selected').text();
let preco_produto = $('#produto_pedido').find(':selected').attr('data-preco-
 produto');
let produtosArray = "";

if (quantidade_pedido == '')
{
$('.pedido-alert-error').css('display','block');
$('.pedido-alert-error .mensagem-erro').html('Quantidade é obrigatória');
 }
  else
   {
  if (novo_preco_produto == '')
  {
  novo_preco_produto = 0.00;
  }

let objeto = [];
let obj = new Object();

obj.id_produto = produto_pedido;
obj.quantidade = quantidade_pedido;
obj.comprimento = comprimento_pedido;
obj.largura = largura_pedido;
obj.espessura = espessura_pedido;
obj.novo_preco = novo_preco_produto;
obj.preco_produto = preco_produto;
obj.nome = nome_produto;

objeto.push(obj);

produtosArray = JSON.stringify(objeto);
sessionStorage.setItem('dadosproduto', produtosArray);

alert('Produto salvo com sucesso. Você pode finalizar o pedido');
$('.btn-finalizar-pedido').css('display','block');
$('.produto_selecionado').hide();

}
});

Answer 1

The way your code is you overwrite the array of objetos every time you save a product. You have to check if there are already products in sessionStorage and if you have already recovered the product array.

Follow the section you must modify:

let objetos = [];
//caso já existam produtos na sessao
if(sessionStorage.getItem('dadosproduto')) {
    objetos = JSON.parse(sessionStorage.getItem('dadosproduto'));
}
//continuação do seu código
let obj = new Object();
...

Another way to do it is to already create the Object variable according to the existence of the key dadosproduto in the session.

let objetos = sessionStorage.getItem('dadosproduto') || [];