Gravar mais uma informação Storage

borehtech · Fevereiro 14, 2017

Olá Pessoal,

Pesquisei no forum e ainda não encontrei algo semelhante a minha dúvida, sou iniciante em HTML e javascript. Fiz uma pesquisa semana passada sobre o HTML5 Storage e gostei bastante até que eu encontrei um script pronto, porém neste script tenha apenas dois valores "name" e "data" fiquei algumas horas tentando desvendar esse mistério para adicionar mais campos no formulário. Os campos foram adicionados, porém quando eu coloca para gravar retornar apenas os dois campos citados. Alguém poderia me dar uma luz. Desde já agradeço.

function SaveItem() {
			
	var name = document.forms.ShoppingList.name.value;
	var data = document.forms.ShoppingList.data.value;
	var item1 = document.forms.ShoppingList.item1.value;
	var item2 = document.forms.ShoppingList.item2.value;
	var preco = document.forms.ShoppingList.preco.value;
	localStorage.setItem(name, data,item1, item2, preco );
	doShowAll();
	
}

function ModifyItem() {
	var name = document.forms.ShoppingList.name.value;
	document.forms.ShoppingList.data.value = localStorage.getItem(name);
	doShowAll();
}

function RemoveItem() {
	var name = document.forms.ShoppingList.name.value;
	document.forms.ShoppingList.data.value = localStorage.removeItem(name);
	doShowAll();
}

function ClearAll() {
	localStorage.clear();
	doShowAll();
}


function doShowAll() {
	if (CheckBrowser()) {
		var key = "";
		var list = "<tr><th>Name</th><th>Value</th><th>item1</th><th>item2</th><th>preco</th></tr>\n";
		var i = 0;
		for (i = 0; i <= localStorage.length - 1; i++) {
			key = localStorage.key(i);
			list += "<tr><td>" + key + "</td>\n<td>"
					+ localStorage.getItem(key) + "</td></tr>\n";
		}
		if (list == "<tr><th>Name</th><th>Value</th><th>item1</th><th>item2</th><th>preco</th></tr>\n") {
			list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td>\n<td><i>empty</i></td>\n<td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n";
		}
		document.getElementById('list').innerHTML = list;
	} else {
		alert('Cannot store shopping list as your browser do not support local storage');
	}
}


function CheckBrowser() {
	if ('localStorage' in window && window['localStorage'] !== null) {

		return true;
	} else {
			return false;
	}
}

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>HTML5 localStorage Example</title>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="WebCodeGeeks.com">
<script src="Storage.js"></script>
<link rel="stylesheet" href="StorageStyle.css">
</head>
<body onload="doShowAll()">
	<h1>Check List de itens</h1>
	<form name=ShoppingList>

		<div id="PlayArea">
			<table>
				<tr>

					<td><b>Item:</b><input type=text name=name>
				    item1
				    <input type=text name=item1>
				    item2
				    <input type=text name=item2>
				    preco
				    <input type=text name=preco>
					<td><b>Quantity:</b><input type=text name=data></td>

				</tr>

				<tr>
					<td>
					    <input type=button value="Save"   onclick="SaveItem()"> 
					    <input type=button value="Modify" onclick="ModifyItem()"> 
					    <input type=button value="Remove" onclick="RemoveItem()">
					  </td>
				</tr>
			</table>
		</div>

		<div id="items_table">
			<h2>Listagem</h2>
			<table id=list></table>
			<p>
				<label><input type=button value="Clear" onclick="ClearAll()">
					<i>* LIMPAR TUDO</i></label></p>
		</div>
	</form>

</body>
</html>

Pita · Fevereiro 15, 2017

LocalStorage e SessionStorage trabalham com o conceito chave:valor, onde você define uma chave para referenciar determinado valor, assim você pode recuperar depois o valor à partir da chave. Para adicionar, utilize algo como:

localStorage.setItem("chave", "valor");

E para recuperar seria algo como

var dadoRecuperado = localStorage.getItem("chave");

No seu caso, para inserir as suas informações, seria algo mais ou menos assim:

localStorage.setItem("name", name);
localStorage.setItem("data", data);
localStorage.setItem("item1", item1);
localStorage.setItem("item2", item2);
localStorage.setItem("preco", preco);

https://www.w3schools.com/html/html5_webstorage.asp

borehtech · Fevereiro 17, 2017

Olá Pita, Tudo bem?

fiz algumas alterações e modificações de acordo com "luz" que você me deu, porém agora só está gravando o ultimo registro, quando eu faço a atualização da página.

Desde já obrigado pela ajuda.

<!DOCTYPE HTML>
<html>
 <head>
  <title>lista</title>
  <style >
    td, th {
      font-family: monospace;
      padding: 4px;
      background-color: #ccc;
    }
    #hoge {
      border: 1px dotted blue;
      padding: 6px;
      background-color: #ccc;
      margin-right: 50%;
    }
    #items_table {
      border: 1px dotted blue;
      padding: 6px;
      margin-top: 12px;
      margin-right: 50%;
    }
    #items_table h2 {
      font-size: 18px;
      margin-top: 0px;
      font-family: sans-serif;
    }
    label {
      vertical-align: top;
    }
  </style>
 </head>
 <body onload="doShowAll()">
  <h1>lista</h1>

  <form name=editor>

    <div id="hoge">
     <p>
    
     </p>

     <p>
      <label> data:
        <input name=data type=date>
        <br>
        <br>
        item1: 
        <input name=name1></label>
     </p>
     <p>
       <label>item2: 
       <input name=item2></label>
     </p>
     <p>preço:
       <input name=item3 type=item3>
</p>
     <p>
       <input type=button value="SALVAR" onclick="doSetItem()">
       
     </p>
    </div>

   <div id="items_table">
     <h2>Items</h2>
     <table id=pairs><tr>
         <th>Data</th><th>item2</th><th>item3</th>
     <th>preço</th></tr></table>
      </div>


   <script>

    function doSetItem() {
     var name = { 'name1': document.forms.editor.name1.value, 'item2': document.forms.editor.item2.value, 'item3':

document.forms.editor.item3.value, 'data': document.forms.editor.data.value }

     localStorage.setItem('name', name.name1);
	 localStorage.setItem('item3', name.item3);
     localStorage.setItem('item2', name.item2);
     localStorage.setItem('data', name.data);
     doShowAll();
    }


    function doShowAll() {
     var key = "";
     var pairs = "";
     var i = 0;
     for (i = 0; i <= localStorage.length - 1; i++) {
      key = localStorage.key(i);
      //pairs += "<tr><td>" + key + "</td>\n<td>" + localStorage.getItem(key) + "</td></tr>\n";
      pairs += "<td>" + localStorage.getItem(key) + "</td>";
     }

     var print = document.getElementById('pairs');
     print.innerHTML = print.innerHTML + pairs;
    }
    function doGetItem() {
     var name = document.forms.editor.name.value;
     var item2 = document.forms.editor.item2.value;
     var data = document.forms.editor.data.value;
	 var item3 = document.forms.editor.item3.value;
     document.forms.editor.data.value = localStorage.getItem(name, item2, item3, data);
     doShowAll();
    }

   </script>

  </form>

 </body>
</html>

William Bruno · Fevereiro 17, 2017

Dessa forma você vai sempre sobrescrever.

Tente gravar um array.

Pita · Fevereiro 17, 2017

3 horas atrás, William Bruno disse:

Dessa forma você vai sempre sobrescrever.

Tente gravar um array.

Exatamente, é preciso criar um array, ou um json, com os dados antes de inserir no localstorage, e lembrar de posteriormente sempre recuperar os dados do localstorage para adicionar no final os novos dados, senão irá sobreescrever o que já existia antes

borehtech · Fevereiro 19, 2017

Entendi, como funciona o setItem,gravar e resultado.

Tenho apenas mais um dúvida. Seria possível, após gravar os itens enviar através de formulário os itens cadastrados com seu respectivos valores? Nem sei por onde começar :(

gabrieldarezzo · Fevereiro 20, 2017

Se não é muitos dados, pq não 'serializar'?

JSON.parse()

JSON.stringify()

Entrar

Arquivado

Gravar mais uma informação Storage

Recommended Posts

borehtech 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Pita 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

borehtech 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Pita 53

Compartilhar este post

Link para o post

Compartilhar em outros sites

borehtech 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

Oriantação - Java Netbeans Componentes Template AdminLTE

Orientação - Codificação Caracteres Especiais em Java

Não consigo carregar imagem do captcha no meu formulário

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante