Enviar dados local storage para uma div

[Gonçalo Costa]

Boa tarde,

Sou iniciante em javascript, e estava a fazer um site em que pretendia colocar um carrinho de compras. Não posso usar Jquery.

O que fiz foi primeiramente colocar os dados em local storage, e quando se clicar no carrinho de compras, mostrar uma div com os dados que foram guardados em local storage.

A minha dificuldade é passar os dados de local storage para o programa, e apresentá los numa div. 

segue parte do código que fiz. 

<div class="carrinho_de_compras_total">
<button onclick="mostrar()">carrinho_de_compras</button>
        <div class="mostrar_carrinho_de_compras" style="height: 200px; width: 100%;">
            <div class="itens"></div>
            <div class="total_dinheiro"></div>
        </div>
    
</div>

function compra_bilhete(n)
{
if(n==1)
{
    var tipo_bilhete= "espetáculo";
    ndias=1;
    var nome=document.getElementById('tipo_b1').innerHTML;
    var nadultos=document.getElementById('a_b1').value;
    var ncriancas=document.getElementById('c_b1').value;
    if(nadultos==0 & ncriancas==0)
    {
        alert("numero de pessoas inválido");
        return
    }
    preco_dia= 50*nadultos + 30*ncriancas;
    precoTotal=preco_dia *ndias;
    
}  else  if(n==2)
{
    var tipo_bilhete= "espetáculo";
    ndias=1;
    var nome=document.getElementById('tipo_b2').innerHTML;
    var nadultos=document.getElementById('a_b2').value;
    var ncriancas=document.getElementById('c_b2').value;
    if(nadultos==0 & ncriancas==0)
    {
        alert("numero de pessoas inválido");
        return
    }
    preco_dia= 50*nadultos + 30*ncriancas;
    precoTotal=preco_dia *ndias;
}
else  if(n==3)
{
    var tipo_bilhete= "espetáculo";
    ndias=1;
    var nome=document.getElementById('tipo_b3').innerHTML;
    var nadultos=document.getElementById('a_b3').value;
    var ncriancas=document.getElementById('c_b3').value;
    if(nadultos==0 & ncriancas==0)
    {
        alert("numero de pessoas inválido");
        return
    }
    preco_dia= 50*nadultos + 30*ncriancas;
    precoTotal=preco_dia *ndias;
}
// else  if(n==4)
// {
//     var tipo_bilhete= "espetáculo";
//     // var ndias=document.getElementById('dias_b2').innerHTML;
//     var tipo_espetaculo=document.getElementById('tipo_b3').innerHTML;
//     var nadultos=document.getElementById('a_b4').value;
//     var ncriancas=document.getElementById('c_b4').value;
//     var preco;
//     preco= 50*nadultos + 30*ncriancas;
// }
else  if(n==5)
{
    var tipo_bilhete= "Parque";
    var ndias=document.getElementById('dias_p1').value;
    var nome=document.getElementById('tipo_p1').innerHTML;
    var nadultos=document.getElementById('a_p1').value;
    var ncriancas=document.getElementById('c_p1').value;
    if(nadultos==0 & ncriancas==0)
    {
        alert("numero de pessoas inválido");
        return
    }
    preco_dia= 50*nadultos + 30*ncriancas;
    precoTotal=preco_dia *ndias;
}
else  if(n==6)
{
    var tipo_bilhete= "Parque";
    var ndias=document.getElementById('dias_p2').value;
    var nome=document.getElementById('tipo_p2').innerHTML;
    var nadultos=document.getElementById('a_p2').value;
    var ncriancas=document.getElementById('c_p2').value;
    if(nadultos==0 & ncriancas==0)
    {
        alert("numero de pessoas inválido");
        return
    }
    preco_dia= 50*nadultos + 30*ncriancas;
    precoTotal=preco_dia *ndias;
}
else  if(n==7)
{
    var tipo_bilhete= "Parque";
    var ndias=document.getElementById('dias_p3').value;
    var nome=document.getElementById('tipo_p3').innerHTML;
    var nadultos=document.getElementById('a_p3').value;
    var ncriancas=document.getElementById('c_p3').value;
    if(nadultos==0 & ncriancas==0)
    {
        alert("numero de pessoas inválido");
        return
    }
    preco_dia= 50*nadultos + 30*ncriancas;
    precoTotal=preco_dia *ndias;
}


    // Pega a lista já cadastrada, se não houver vira um array vazio
    var carrinho_de_compras = JSON.parse(localStorage.getItem('carrinho-compras') || '[]');
    // Adiciona reserva
    carrinho_de_compras.push({
     tipo_de_bilhete: tipo_bilhete,
     dias: ndias,
     nome:nome,
     numero_adultos: nadultos,
     numero_criancas: ncriancas,
     preco_total: precoTotal
    });
    // Salva a lista alterada
    localStorage.setItem("carrinho-compras", JSON.stringify(carrinho_de_compras));
    alert("Bilhete adicionado ao carrino de compras");

}


function mostrar(){


    for (i=0;i<99;i++)
    {
        var x=JSON.parse(localStorage.getItem('carrinho-compras'));
        if(x==null) return; // quando não houver mais dados no local storage, sai do ciclo for        

    }
    
}

Se alguém me pudesse ajudar agradecia imenso.

Cumprimentos

[Zamalor]

Bem a primeira coisa a fazer é entender como funciona manusear o local storage com javascript:
https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/