早上好， 我是 javascript 的新手，我无法从本地存储中获取完整的数组。 我编写了这段代码，但它只在屏幕上打印存储在数组最后一个元素中的数据，而我打算在屏幕上打印数组所有元素的数据。有人可以帮助我吗？ 我不会使用 jquery
var preco_final=0; // preço total -> adiciona o preco de todos os bilhetes comprados
function mostrar(){
var carrinho=JSON.parse(localStorage.getItem('carrinho-compras'));
for(i=0;i<carrinho.length;i++)
{
//guarda em variáveis os dados que estão no localstorage
var tipo_bilhete_carrinho= "tipo de bilhete: " +carrinho[i].tipo_de_bilhete;
var dias_carrinho="dias: "+carrinho[i].dias;
var nome_carrinho="nome: "+carrinho[i].nome_t;
var nadultos_carrinho="númeor de adultos: "+carrinho[i].numero_adultos;
var ncriancas_carrinho="número de crianças: "+carrinho[i].numero_criancas;
var preco_carrinho="preço do bilhete: "+carrinho[i].preco_total; // preço do bilhete em causa
preco_final +=carrinho[i].preco_total; // preço total -> adiciona o preco de todos os bilhetes comprados
// Guarda todas as variáveis num array e converte numa lista pela função map
var compra=[tipo_bilhete_carrinho,dias_carrinho,nome_carrinho,nadultos_carrinho,ncriancas_carrinho,preco_carrinho];
ReactDOM.render(React.createElement("ul", {id:"lista_compras"},
compra.map( (compra) => React.createElement("li", null, compra)),React.createElement("hr",null,"")),document.getElementsByClassName("itens")[0]);
//hr tag que define mudança temática -> adiciona uma linha
}
document.getElementById('preco_total').innerHTML= "Preço total: "+preco_final;
}
function apagar(){
localStorage.removeItem('carrinho-compras'); //apaga o carrinho de compras
document.getElementsByClassName('itens')[0].innerHTML="";// apaga o conteudo da div, de modo a não mostrar nada no ecrã
document.getElementById('preco_total').innerHTML= ""; // apaga o conteudo da div do preço total
}body{ margin: 0;}
#lista_compras{
list-style-type: none; /* Remove as bolinhas dos elementos da lista */
}<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/carrinho_compras.css">
<link rel="stylesheet" href="css/menu.css">
<link rel="stylesheet" href="css/cabecalho_rodape.css">
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<link rel="icon" type="images/jpg" href="imagens/logo.jpg">
<title>Adventure Park - Bilheteira</title>
</head>
<body onload="mostrar()">
<header id="cabecalho"> <!-- Cabeçalho / menu-->
<a href="index.html" id="hyper_to_home">
<div id="logo_name">
<img id="logo" src="imagens/logo.png">
<h3 id="nome_parque">Parque de diversões</h3>
</div>
</a>
<div id="menudiv"></div>
<picture><a href="carrinho_de_compras.html"><img id="carrinho_de_compras"src="imagens/Bilheteira/carrinho_compras.png" width="40px" height="35px" ></a> </picture>
</header>
<div class="itens" id="item"></div>
<div id="preco_total"></div>
<div id="btn_carrinho">
<a href="bilheteira.html"><button>Continuar a comprar</button></a>
<input type="reset" value="Apagar itens do carrinho" onclick="apagar()">
</div>
<footer id="rodape"> <!-- Rodapé -->
<div id="data-hora">12/10/2019 23:59:10</div>
</footer>
<script src="js/menu.js"></script> <!-- script do menu -->
<script src="js/carrinho_compras.js"></script>
<script src="js/data_e_hora.js"></script>
</body>
</html> 如何在本地存储中存储数据:
// Pega a lista já registada, se não houver cria
var carrinho_de_compras = JSON.parse(localStorage.getItem('carrinho-compras') || '[]');
// Adiciona reserva
carrinho_de_compras.push({
tipo_de_bilhete: tipo_bilhete,
dias: ndias,
nome_t: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");最佳答案
您可以迭代地遍历 localStorage 数组，然后单独打印每个元素，如下所示
for (var i = 0; i < localStorage.length; i++){
console.log(localStorage.getItem(localStorage.key(i)));
}
关于javascript - 如何打印以筛选存储在本地存储中的所有数组元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59611332/