如何将存储在本地存储中的所有数组元素打印到屏幕上

huangapple
go评论118阅读模式
英文:

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

  1. var preco_final=0; // preço total -> adiciona o preco de todos os bilhetes comprados
  2. function mostrar(){  
  4.     var carrinho=JSON.parse(localStorage.getItem('carrinho-compras'));
  5.     for(i=0;i<carrinho.length;i++)
  6.     {    
  8.         //guarda em vari&#225;veis os dados que est&#227;o no localstorage
  9.         var tipo_bilhete_carrinho= "tipo de bilhete: " +carrinho[i].tipo_de_bilhete;
  10.         var dias_carrinho="dias: "+carrinho[i].dias;
  11.         var nome_carrinho="nome: "+carrinho[i].nome_t;
  12.         var nadultos_carrinho="n&#250;meor de adultos: "+carrinho[i].numero_adultos;
  13.         var ncriancas_carrinho="n&#250;mero de crian&#231;as: "+carrinho[i].numero_criancas;
  14.         var preco_carrinho="pre&#231;o do bilhete: "+carrinho[i].preco_total; // pre&#231;o do bilhete em causa
  15.         preco_final +=carrinho[i].preco_total; // pre&#231;o total -&gt; adiciona o preco de todos os bilhetes comprados
  17.         // Guarda todas as vari&#225;veis num array e converte numa lista pela fun&#231;&#227;o map
  18.         var compra=[tipo_bilhete_carrinho,dias_carrinho,nome_carrinho,nadultos_carrinho,ncriancas_carrinho,preco_carrinho];
  19.         ReactDOM.render(React.createElement("ul", {id:"lista_compras"},
  20.             compra.map( (compra) => React.createElement("li", null, compra)),React.createElement("hr",null,"")),document.getElementsByClassName("itens")[0]);
  21.         //hr tag que define mudan&#231;a tem&#225;tica -&gt; adiciona uma linha  
  22.     }
  23.     document.getElementById('preco_total').innerHTML= "Pre&#231;o total: "+preco_final;
  24. }
  26. function apagar(){
  27.     localStorage.removeItem('carrinho-compras'); //apaga o carrinho de compras
  28.     document.getElementsByClassName('itens')[0].innerHTML="";
  29.     document.getElementById('preco_total').innerHTML= "";
  30. }

How do I store data in local storage:

  1. // Pega a lista j&#225; registada, se n&#227;o houver cria
  2. var carrinho_de_compras = JSON.parse(localStorage.getItem('carrinho-compras') || '[]');
  3. // Adiciona reserva
  4. carrinho_de_compras.push({
  5.  tipo_de_bilhete: tipo_bilhete,
  6.  dias: ndias,
  7.  nome_t:nome,
  8.  numero_adultos: nadultos,
  9.  numero_criancas: ncriancas,
  10.  preco_total: precoTotal
  11. });
  12. // Salva a lista alterada
  13. localStorage.setItem("carrinho-compras", JSON.stringify(carrinho_de_compras));
  14. 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 -->

  1. var preco_final=0; // pre&#231;o total -&gt; adiciona o preco de todos os bilhetes comprados
  2. function mostrar(){  
  3. var carrinho=JSON.parse(localStorage.getItem(&#39;carrinho-compras&#39;));
  4. for(i=0;i&lt;carrinho.length;i++)
  5. {    
  6. //guarda em vari&#225;veis os dados que est&#227;o no localstorage
  7. var tipo_bilhete_carrinho= &quot;tipo de bilhete: &quot; +carrinho[i].tipo_de_bilhete;
  8. var dias_carrinho=&quot;dias: &quot;+carrinho[i].dias;
  9. var nome_carrinho=&quot;nome: &quot;+carrinho[i].nome_t;
  10. var nadultos_carrinho=&quot;n&#250;meor de adultos: &quot;+carrinho[i].numero_adultos;
  11. var ncriancas_carrinho=&quot;n&#250;mero de crian&#231;as: &quot;+carrinho[i].numero_criancas;
  12. var preco_carrinho=&quot;pre&#231;o do bilhete: &quot;+carrinho[i].preco_total; // pre&#231;o do bilhete em causa
  13. preco_final +=carrinho[i].preco_total; // pre&#231;o total -&gt; adiciona o preco de todos os bilhetes comprados
  14. // Guarda todas as vari&#225;veis num array e converte numa lista pela fun&#231;&#227;o map
  15. var compra=[tipo_bilhete_carrinho,dias_carrinho,nome_carrinho,nadultos_carrinho,ncriancas_carrinho,preco_carrinho];
  16. ReactDOM.render(React.createElement(&quot;ul&quot;, {id:&quot;lista_compras&quot;},
  17. compra.map( (compra) =&gt; React.createElement(&quot;li&quot;, null, compra)),React.createElement(&quot;hr&quot;,null,&quot;&quot;)),document.getElementsByClassName(&quot;itens&quot;)[0]);
  18. //hr tag que define mudan&#231;a tem&#225;tica -&gt; adiciona uma linha  
  19. }
  20. document.getElementById(&#39;preco_total&#39;).innerHTML= &quot;Pre&#231;o total: &quot;+preco_final;
  21. }
  22. function apagar(){
  23. localStorage.removeItem(&#39;carrinho-compras&#39;); //apaga o carrinho de compras
  24. document.getElementsByClassName(&#39;itens&#39;)[0].innerHTML=&quot;&quot;;// apaga o conteudo da div, de modo a n&#227;o mostrar nada no ecr&#227;
  25. document.getElementById(&#39;preco_total&#39;).innerHTML= &quot;&quot;; // apaga o conteudo da div do pre&#231;o total
  26. }

<!-- language: lang-css -->

  1. body{ margin: 0;}
  2. #lista_compras{
  3. list-style-type: none;     /* Remove as bolinhas dos elementos da lista */
  4. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;pt&quot;&gt;
  3. &lt;head&gt;  
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  6. &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/carrinho_compras.css&quot;&gt;
  7. &lt;link rel=&quot;stylesheet&quot; href=&quot;css/menu.css&quot;&gt;
  8. &lt;link rel=&quot;stylesheet&quot; href=&quot;css/cabecalho_rodape.css&quot;&gt;
  9. &lt;script src=&quot;js/react.js&quot;&gt;&lt;/script&gt;
  10. &lt;script src=&quot;js/react-dom.js&quot;&gt;&lt;/script&gt;
  11. &lt;link rel=&quot;icon&quot; type=&quot;images/jpg&quot; href=&quot;imagens/logo.jpg&quot;&gt; 
  12. &lt;title&gt;Adventure Park - Bilheteira&lt;/title&gt;
  13. &lt;/head&gt;
  14. &lt;body onload=&quot;mostrar()&quot;&gt;
  15. &lt;header id=&quot;cabecalho&quot;&gt;    &lt;!-- Cabe&#231;alho / menu--&gt;
  16. &lt;a href=&quot;index.html&quot; id=&quot;hyper_to_home&quot;&gt;
  17. &lt;div id=&quot;logo_name&quot;&gt;
  18. &lt;img id=&quot;logo&quot; src=&quot;imagens/logo.png&quot;&gt;
  19. &lt;h3 id=&quot;nome_parque&quot;&gt;Parque de divers&#245;es&lt;/h3&gt;
  20. &lt;/div&gt;
  21. &lt;/a&gt;
  22. &lt;div id=&quot;menudiv&quot;&gt;&lt;/div&gt;
  23. &lt;picture&gt;&lt;a href=&quot;carrinho_de_compras.html&quot;&gt;&lt;img id=&quot;carrinho_de_compras&quot;src=&quot;imagens/Bilheteira/carrinho_compras.png&quot; width=&quot;40px&quot; height=&quot;35px&quot; &gt;&lt;/a&gt; &lt;/picture&gt;
  24. &lt;/header&gt;
  25. &lt;div class=&quot;itens&quot; id=&quot;item&quot;&gt;&lt;/div&gt;
  26. &lt;div id=&quot;preco_total&quot;&gt;&lt;/div&gt;
  27. &lt;div id=&quot;btn_carrinho&quot;&gt;
  28. &lt;a href=&quot;bilheteira.html&quot;&gt;&lt;button&gt;Continuar a comprar&lt;/button&gt;&lt;/a&gt;
  29. &lt;input type=&quot;reset&quot; value=&quot;Apagar itens do carrinho&quot; onclick=&quot;apagar()&quot;&gt;
  30. &lt;/div&gt;
  31. &lt;footer id=&quot;rodape&quot;&gt;      &lt;!-- Rodap&#233; --&gt;
  32. &lt;div id=&quot;data-hora&quot;&gt;12/10/2019 23:59:10&lt;/div&gt;
  33. &lt;/footer&gt;
  34. &lt;script src=&quot;js/menu.js&quot;&gt;&lt;/script&gt; &lt;!-- script do menu --&gt;
  35. &lt;script src=&quot;js/carrinho_compras.js&quot;&gt;&lt;/script&gt;
  36. &lt;script src=&quot;js/data_e_hora.js&quot;&gt;&lt;/script&gt;
  37. &lt;/body&gt;
  38. &lt;/html&gt;

<!-- end snippet -->

How do I store data in local storage:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1.     // Pega a lista j&#225; registada, se n&#227;o houver cria
  2. var carrinho_de_compras = JSON.parse(localStorage.getItem(&#39;carrinho-compras&#39;) || &#39;[]&#39;);
  3. // Adiciona reserva
  4. carrinho_de_compras.push({
  5. tipo_de_bilhete: tipo_bilhete,
  6. dias: ndias,
  7. nome_t:nome,
  8. numero_adultos: nadultos,
  9. numero_criancas: ncriancas,
  10. preco_total: precoTotal
  11. });
  12. // Salva a lista alterada
  13. localStorage.setItem(&quot;carrinho-compras&quot;, JSON.stringify(carrinho_de_compras));
  14. alert(&quot;Bilhete adicionado ao carrino de compras&quot;);

<!-- end snippet -->

答案1

得分: 3

你可以迭代地遍历 localStorage 数组，然后像下面这样逐个打印每个项：

  1. for (var i = 0; i < localStorage.length; i++){
  2.     console.log(localStorage.getItem(localStorage.key(i)));
  3. }
英文:

You can go through the localStorage Array iteratively and then print each item individually like below

  1. for (var i = 0; i &lt; localStorage.length; i++){
  2. console.log(localStorage.getItem(localStorage.key(i)));
  3. }

答案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.

huangapple
  • 本文由 发表于 2020年1月6日 19:29:28
  • 转载请务必保留本文链接：https://go.coder-hub.com/59611332.html
  • css
  • html
  • javascript
  • local-storage
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定