Ir para conteúdo
    • João Batista Neto

      iMasters InterCon 2017   10-10-2017

      Ainda dá tempo de se inscrever no iMasters InterCon 2017, o maior evento dev do Brasil!  
borehtech

Gravar mais uma informação Storage

Recommended Posts

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Dessa forma você vai sempre sobrescrever.

Tente gravar um array.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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 :(

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora


  • Próximos Eventos

  • Conteúdo Similar

    • Por editorpa
      Bom dia!
      Sou técnico em informática.
      Estudei java em 2014 java SE creio eu e um pouco de EE que foi com JSP e TomCat
      Queria que alguém tirasse minha duvidas pois java para web é bem extenso:
      O que é maven?
      O que é servlet, o que muda de jsf para jsp?
      O que é glassfish?
      Diferença do jdbc para jpa?
      O que é Spring? Diferença do boot para security?
      O que é JWT?
      O Jboss seria tipo o apache tomcat?
      O que é javabeans? E hibernate?
      E por ultimo o que é um webservice em Jax-rs?? Eu só conheco ws em xml
      No tecnico eu usava a IDE eclipse, agora já vi no fórum recomendações pelo Intellij IDEA ultimate?
    • Por ademar
      Boa noite!
       
      Estou com problema no meu projeto. Tenho um botão Mesa1 que estar no Jpanel na Tela Principal,  esse botão quando clicado chama o form frmvendas dentro do  frame Interno  e muda de cor , nesse frame interno tem um botão FINALIZAR VENDAS. O que quero saber é o seguinte: ao finalizar a venda clicando no botão FINALIZAR VENDAS, como faço pra setar o botão Mesa1 que está na Tela Principal.
       
       
      Agradeço a quem me ajudar.
       
    • Por viniciussmelo
      Galera, em meu site de provas, o usuário escolhe determinadas provas, de determinadas matéria(ex: provas de matemática, portugues) e a faz, que vão para um histórico, na qual ele pode ver. Já o professor quando loga, poderia ver a média de cada matéria (ex: porcentagem de acertos de matematica, porcentagem de acertos de portugues). Porém para isso eu teria que selecionar as provas que eu quisesse no banco com uma variavel ($prova = 'prova de matematica') que acessaria o banco e traria todos os dados. Após isso, faria uma média dessas matérias para mostrar ao professor. Minha pergunta é: Como eu faria isso com array e while ? 
      citação:
      $prova = "prova de matematica";
      $res = ("SELECT nomeProva, porcentagemDeAcertosUsuario FROM histórico where nomeProva = '$prova'");
      //montando a table
      echo '
      <table>
      <tr>
      <td><h1>Matéria: </td>
      <td><h1>Média dos usuários: </td>
      </tr></h1>';
      //executando o comando while
      while($escrever=mysql_fetch_array($res)){
      echo '<tr>
      <td>' . $escrever['nomeProva'] . '</td> 
      <td>' . $escrever['porcentagemDeAcertosUsuario'] . '</td> 
      </tr>';
      }
      echo '</table>';

      Assim estou conseguindo trazer todos os dados do banco de determinada matéria com while, mas não consigo desenvolver um código que veja o número de pessoas que fizeram a matéria e fazer uma média dessa matéria entre os usuários que a fizeram.
    • Por backstap
      Opa galera
      Andando pela net conheci alguns sites que tem uma usabilidade muito boa, carregamento instantâneo de páginas, carregar conteúdo sem carregar página inteira...
      Olhem esse site http://list-it.com.br/, não é imoral a forma que o site carrega rapidamente tudo? Os links alteram, tudo altera, mas o carregamento é praticamente instantâneo...
       
      Alguém sabe quais tecnologias esse site usa?
      Dei uma pesquisadas e vi o tal "One page application" baixei alguns exemplos e vi que eles funcionam como se fossem "abas", porém, quando vejo o código, todas as páginas (todo o HTML) carregam de uma vez só...
      Diferente desse site, que realmente, pra cada clique, o HTML é diferente...
       
      Outro exemplo, é o site do React
      https://reactjs.org/ 
       
      É impressionante demais
      Seriam eles feitos em PhP e Javascript? Usando Ajax?
      Ou outra tecnologia?
       
      Outro site na mesma pegada é esse aqui https://www.gitbook.com/
      Mas esse último é um pouco mais lento que os outros...
    • Por Luccas Gaulia
      Ola pessoal,
       
      Estou iniciando nesta linguagem, e preciso de uma orientação...
       
      Preciso realizar um código javascript que deverá ficar em meu servidor e ser disponibilizado para o cliente apenas o .JS, afim de guardar o código para mim...
       
      Eu iria verificar qual é o cliente pode utilizar dando a ele uma senha codificada (tipo token) e verificar se a url dele é autorizada...
       
      O exemplo explicar melhor...
       
      Esse seria o código que o cliente colocaria em seu site
      <script src="https://meusite.com.br/cotacao_dolar.js?token=3c780698c2cf59ca7ae5130fdc2016ce4af736a4"></script>  
      E o código no meu servidor puxaria esses dois valores (token e a URL)...
       
      Como posso puxar esses valores para o meu script?
       
      Alguém exemplos ou modelos para eu seguir?
       
      Att,
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: