How to create a list from data saved in Storage location

Asked

Viewed 742 times

0

I have a task where I need to create a registry for users, save in the Log location and then in a list show on the site all registered users. I was able to save the user data, but I’m having problems in the listing part to show on the page the data of registered users, I have no idea how to do this part.

Here’s what I’ve done so far. JS and html.

function salvarConteudoStorage() {

var arraycadastro=[] if(JSON.parse(localStorage.getItem("data")) != null){ arraycadastro.push(JSON.parse(localStorage.getItem("data"))); }

if (typeof(Storage) !== " Undefined") {

var nome = document.getElementById("fnome").value;
var email = document.getElementById("femail").value;
var imagem = document.getElementById("imagem").value;
var repositorio = document.getElementById("repositorio").value;


var info = {nome, email, imagem, repositorio};
console.log(info);
arraycadastro.push(info);
var infoJson = JSON.stringify(arraycadastro);
localStorage.setItem("dados", infoJson);

} Else { window.Alert("Web Storage API not found"); } }

<body>
    <div>

      <form action="#">
        <div >
          <input type="text" id="fnome"/>
          <label for="fnome">Nome</label>
        </div>
        <div >
          <input  type="text" id="femail"/>
          <label  for="femail">E-mail</label>
        </div>
        <div >
          <input  type="text" id="imagem"/>
          <label  for="imagem">URL da imagem</label>
        </div>
        <div >
          <input  type="text" id="repositorio"/>
          <label  for="repositorio">Github</label>
        </div>                
      </form>  

      <button  onclick="salvarConteudoStorage()">
        Salvar
      </button>

    </div>
    <script
          src="https://code.jquery.com/jquery-3.3.1.js"
          integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
          crossorigin="anonymous"></script>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="armazenar.js"></script>
</body>
</html>

javascript jquery css html5 json

1 answer

0


NOTE: First of all test on your machine. on the site may not work for security reasons because it is saving locally. I modified the save function. and created another one just to search that you can call right when you load the page. I hope I’ve helped.

const tBody = document.getElementById('corpoTabela');

function salvarConteudoStorage() {
  let arraycadastro = [];

  if (localStorage.getItem('dados') != null) {
    arraycadastro = JSON.parse(localStorage.getItem('dados'));
  } else {
    arraycadastro;
  }

  var nome = document.getElementById("fnome").value;
  var email = document.getElementById("femail").value;
  var imagem = document.getElementById("imagem").value;
  var repositorio = document.getElementById("repositorio").value;


  var info = {
    nome,
    email,
    imagem,
    repositorio
  };

  arraycadastro.push(info);
  var infoJson = JSON.stringify(arraycadastro);
  localStorage.setItem("dados", infoJson);

  buscarConteudo();
}


function buscarConteudo() {
  const arr = JSON.parse(localStorage.getItem('dados'));

  if (arr != null) {
    let tr = '';
    arr.map(conteudo => {
      tr += `
			<tr>
					<td>${conteudo.nome}</td>
					<td>${conteudo.email}</td>
					<td>${conteudo.imagem}</td>
					<td>${conteudo.repositorio}</td>
				</tr>`


    })
    tBody.innerHTML = tr;
  }
}
<div>

  <form>
    <div>
      <input type="text" id="fnome" />
      <label for="fnome">Nome</label>
    </div>
    <div>
      <input type="text" id="femail" />
      <label for="femail">E-mail</label>
    </div>
    <div>
      <input type="text" id="imagem" />
      <label for="imagem">URL da imagem</label>
    </div>
    <div>
      <input type="text" id="repositorio" />
      <label for="repositorio">Github</label>
    </div>
  </form>

  <button onclick="salvarConteudoStorage()">
			Salvar
		</button>

</div>

<div>
  <table>
    <th>nome</th>
    <th>E-mail</th>
    <th>url</th>
    <th>Github</th>
    <tbody id="corpoTabela">

    </tbody>
  </table>
</div>

  • You helped a lot, man, thank you. But now I have another question: In the image part, when user put a url of an image in the text box, this image should load when displaying the data, and I saw that you used Jquery and I don’t know much about it, you have some idea of how to do it?

  • Actually I didn’t use jquery, rs. This is a new standard of ES6 Avascript, template string. Instead of adding the td <td>${content.image}</td>, you can put a <img src={${content.image}}> remembering that the image content should be a URL to search the user. If you helped a PU in the answer to give me a strength, kkk. And you put the question as resolved, it helps me a lot to continue solving issues here

  • I voted, but since I’m new, my vote is not counted. So bro, I tried to do what you said to the image and it’s giving this error "Failed to load Resource: net::ERR_FILE_NOT_FOUND". That damn picture is the only thing missing. Obg by help again =D.

Browser other questions tagged javascript jquery css html5 json

You are not signed in. Login or sign up in order to post.