Ir para conteúdo
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

  • Conteúdo Similar

    • Por edsouzza
      Pessoal, a ideia é que quando o usuário escolher um campo identificado no checkbox o sistema deverá inserir o texto do checkbox no ArrayList. Mas esta pegando apenas o ultimo nome do ultimo checkbox.
      public void listarOpcoesDeCampos() {
      //para manipular o arrayList de campos voce dever criar outro arrayList para recebe-lo e assim com lst.get(0) chamar o campo desejado
      lstCamposRetornados = retornarNomesCampos(); //retornando o codigo -> lstCamposRetornados.get(0) -> este procedimento me da acesso a qdeColunas tb
          //definindo o posicionamento dos checksbox dos campos
          int pos_coluna = 50, pos_linha = 40, tam_linha = 250, alt_linha = 30;
          for (int i = 0; i < qdeColunas; i++) {
              //criando e mostrando um checkbox com o nome da coluna da tabela
              chk = new JCheckBox();
              chk.setBounds(pos_coluna, pos_linha, tam_linha, alt_linha);
              c.add(chk);
              c.repaint();
              chk.setText(retornarNomesCampos().get(i));         //setando o nome da coluna no checbox            
              
              //registrando o objeto que sofrerá ação
              chk.addActionListener(this);
              
              //se posicionando para criacao do proximo checkbox
              pos_coluna = 50;
              pos_linha = pos_linha + 20;
          }
                 
      }
      @Override
      public void actionPerformed(ActionEvent e) {
      lstListaCampos.add(chk.getText());
      }
      Fiz um laço for para visualizar o que a lista contem e percebi que esta pegando somente o último ítem
      saída atual:
      campo OBS
      campo OBS
      A saida desejada é:
      campo CODIGO
      campo OBS
      Ou seja no ArrayList deverá conter apenas os ítens(checkbox) selecionados.
    • Por FuckSystem
      An... Oii pessoal sou novo comecei hoje
      Ainda nem passei aquela madruga de tutorial de programação mas me ajudem com isso
      File f = new File("dados.txt");  f.delete();   Aparece um erro dizendo Unknown entity "File" Unknown entity "f"   Se puder ajudar agradeço tmj ,_, vlw por ler até aqui    
    • Por BrunoFerreira
      Boa noite
      Tenho uma consulta que me da vários serviços cadastrados. 
      A imagem + um link + um telefone + descrição por exemplo.
      Quero deixar só a imagem e ao clicar nela (cai/exibe/etc) as outras informações
      IMG (clicar) aparece (link+telefone+descrição)
       
      eu usei este... mas todos os itens exibidos viram um botão.. ótimo! ... mas todos só dão a informação do primeiro item exibido.
      Coloquei aqui o que estou usando e como.. se alguém souber e puder me da um toque.. obrigado
      se eu descobrir antes.. eu respondo aqui tb...
      //assim que coloquei.. funciona mas só para o primeiro <?php while($user = mysqli_fetch_assoc($result)){ ?> <button type="button" onclick="Mudarestado('minhaDiv')"> <?php echo '<img src="'.$user['imgagem'].'" style="max-width: 300px">'; ?><br> //quero clicar aqui </button> <div id="minhaDiv" style="display:none"> <a href="<?php echo $user['anuncios_url']; ?>" target="_blanck">LINK</a><br> // e aparecer ou esconder aqui <?php echo $user['telefone']; ?><br> <?php echo $user['descricao']; ?><hr> </div> <?php } ?> <?php while($user = mysqli_fetch_assoc($result)){ ?> <?php echo '<img src="'.$user['imgagem'].'" style="max-width: 300px">'; ?><br> //quero clicar aqui <a href="<?php echo $user['anuncios_url']; ?>" target="_blanck">LINK</a><br> // e aparecer ou esconder aqui <?php echo $user['telefone']; ?><br> <?php echo $user['descricao']; ?><hr> <?php } ?> funciona mas só exibe sempre a primeira consulta mesmo tendo vários item vindo do bd function Mudarestado(el) { var display = document.getElementById(el).style.display; if (display == "none") document.getElementById(el).style.display = 'block'; else document.getElementById(el).style.display = 'none'; } <div id="minhaDiv" style="display:none">COLOQUEI A IMAGEM AQUI (VEM DO BD</div> <button type="button" onclick="Mudarestado('minhaDiv')">COLOQUE (LINK+TEL+DESCRIÇÃO AQUI VEM DO BD</button>  
    • Por leaio
      Olá pessoal estou desenvolvendo um app para android no visual Studio que calcula a idade de um cachorro para anos humanos, para isso estou recuperando o numero digitado (números) de uma TextView convertendo em uma String e depois para um Int para fazer o cálculo, roda sem erros, mas quando clica no botão para calcular o app simplesmente fecha com mensagem de erro, testei no emulador e no próprio cel e dá o mesmo erro, por favor me ajudem... segue o código...
       
      package idadedecachorro.com.idadedecachorro; import android.icu.text.AlphabeticIndex; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; public class MainActivity extends AppCompatActivity { private Button botaoDescobrir; private EditText Idade; private TextView Resultado; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Idade = findViewById(R.id.lblIdade); botaoDescobrir = findViewById(R.id.btnDescobrir); Resultado = findViewById(R.id.txtResult); botaoDescobrir.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { int valorDigitado; int result; String textoDigitado; textoDigitado = Idade.getText().toString(); valorDigitado = Integer.parseInt(textoDigitado); result = valorDigitado * 7; Resultado.setText(result); } }); } }  
    • Por BrunoFerreira
      Boa tarde.
      Eu já pesquisei aqui no forum ..algumas soluções mas não consegui incorporar ela no que quero..
      Eu tenho um select que tem 2 cidades X .. ao clicar nele, abre um novo selec com o bairro da cidade escolhida.. tudo bem até aqui
      Escolhendo o bairro eu quero que seja exibido o conteúdo dentro de uma div (sei fazer a ancora se fosse para poucos bairros)
      O que quero é: que o resultado do select bairros fique ancorado em uma unica div (esta div pegaria o ID do resultado do select)...

      Outra coisa se possível é:
      como eu coloco no WHERE o resultado escolhido de um select..
      Tipo.. ao invés de SELECT * FROM tabela WHERE bairro='x' eu quero que X seja o bairro escolhido pelo usuário. mas se eu resolver só o primeiro já ta excelente pro que quero.

      ps: eu consegui resolver fazendo por outros meios bem simples mas ficou hiper longo o código e se eu for atualizar algo não vai ser rápido..
      Obrigado
       
      CÓDIGO JAVA FUNCIONANDO.. PESQUISEI E VI QUE CAUSA CONFLITO DE WINDOWS.ONLOAD MAS NÃO CONSEGUI COLOCAR 2 FUNÇÕES JUNTAS.. SEMPRE SÓ UMA DELAS FUNCIONA function abreJanela(URL) { location.href = URL; // se for popup utiliza o window.open } // select das cidades e bairros--> function id( funcao01 ){ return document.getElementById( funcao01 ); } window.onload = function() { id('municipio').onchange = function() { id('PRIMEIRO').style.display = this.value==1 ? 'block' : 'none'; id('SEGUNDO').style.display = this.value==2 ? 'block' : 'none'; } }; xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx SELEC DAS CIDADE VINDO DO BD <select name="municipio" id="municipio" class="input"> <option value="0">Selecione:</option> <option value="1">CIDADE 1</option> <option value="2">CIDADE 2</option> </select> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx SELECT DOS BAIRROS VINDOS DO BANDO DE DADOS FUNCIONANDO <select name="bairro" id="PRIMEIRO" onchange="javascript: abreJanela(this.value)" style="display: none;"> <!-- AQUI TEM O OUTRO SELECT QUE TA FUNCIONANDO IGUAL O DE BAIXXO --> </select> <select name="bairro" id="SEGUNDO" onchange="javascript: abreJanela(this.value)" style="display: none; "> <option selected="selected" value="" >Selecione o bairro</option> <?php $dadosCidade = $con->query("SELECT * FROM bairros WHERE bairros_uf = 'PR' AND bairros_cidade = 'Fazenda Rio Grande' ORDER BY bairros_nome ASC"); ?> <?php while($user = mysqli_fetch_array($dadosCidade)){ ?> <option value="#<?php echo $user['bairros_nome']; ?>"><?php echo $user['bairros_nome']; ?></option> <?php } ?> </select> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx <div id="AQUI EXIBE O RESULTADO"> <div class="tab"><!--AQUI É CSS PARA MANTER OCULTO ENQUANTO NÃO PRECISAR --> <div id="QUERO PEGAR O RESULTADO DO SELECT BAIRROS"> <?php $dados = $con->query("SELECT * FROM TABELA WHERE coluna='RESULTADO DO SELECT BAIRRO'"); ?> <?php while($user = mysqli_fetch_array($dados)){ ?> <?php echo $user['COLUNA A EXIBIR']; ?><hr> <?php } ?> Ocultado o restante  
×

Informação importante

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