英文:
How to print to screen all array elements stored in local storage
问题
Good Morning,
I'm new in javascript and I'm having trouble getting a full array from local storage.
I made this code, but it only prints on screen the data stored in the last element of the array, and I intended to print on screen the data of all elements of the array. Someone can help me?
I can't use 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="";
document.getElementById('preco_total').innerHTML= "";
}
How do I store data in local storage:
// 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");
英文:
Good Morning,
I'm new in javascript and I'm having trouble getting a full array from local storage.
I made this code, but it only prints on screen the data stored in the last element of the array, and I intended to print on screen the data of all elements of the array. Someone can help me?
I can't use jquery
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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
}
<!-- language: lang-css -->
body{ margin: 0;}
#lista_compras{
list-style-type: none; /* Remove as bolinhas dos elementos da lista */
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
How do I store data in local storage:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// 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");
<!-- end snippet -->
答案1
得分: 3
你可以迭代地遍历 localStorage 数组，然后像下面这样逐个打印每个项：
for (var i = 0; i < localStorage.length; i++){
console.log(localStorage.getItem(localStorage.key(i)));
}
英文:
You can go through the localStorage Array iteratively and then print each item individually like below
for (var i = 0; i < localStorage.length; i++){
console.log(localStorage.getItem(localStorage.key(i)));
}
答案2
得分: 0
我建议添加Mustache.js。它是一个无逻辑*（*没有if和else，也没有循环）的模板引擎，非常容易实现。然后，您可以将其打印到类似showtext组件的地方，例如Showtext.jsx，或者如果您需要弹出Alert类型的组件，我建议使用Reactstrap-modal。如果您需要逻辑模板，随时可以添加Handlebars.js插件到Mustache.js，它是完全兼容的。
英文:
I would suggest to add Mustache.js. Its a logicless* (*no ifs and elses, for cycles) engine to print templates, its super easy to implement. You can then print it into kind of a showtext component, exmp. Showtext.jsx, or if you require pop up, Alert type component, I would suggest Reactstrap-modal. If you will require logic templates, you can at any point add Handlebars.js addon to Mustache.js, its fully compatible.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论