Publicidade

borehtech

Gravar mais uma informação Storage

Patrocínio:

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>

 

0

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

0

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>

 

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Dessa forma você vai sempre sobrescrever.

Tente gravar um array.

0

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

0

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

0

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 diegoaugusto
      Pessoal estou precisando usar um autocomplete parecido com esse aqui do forum.
       
      Baixei um da internet e ate o uso ok, o problema é que agora preciso que o autocomplete pesquise no meu banco.
       
      $("#msdb-0").mSelectDBox({ "list": [ "alpha", "beta", "gamma", "delta", "epsilon", "zeta", "eta", "theta", "iota", "kappa", "lambda", "mu", "nu", "xi", "omicron", "pi", "rho", "sigma", "tau", "upsilon", "phi", "chi", "psi", "omega" ], "multiple": 1, "autoComplete": true, "onInit": function(ctx) { new $.fn.mSelectDBox.MyCustomAppear1(ctx); } }); preciso que ali em "list" venha informações do meu banco pelo php com um mysqli_fetch_array trazer todos os cadastros do banco.
       
    • Por murilosouzajr
      Olá,
       
      Tenho um duvida simples, mas não consigo resolver! rs
       
      Se o valor do resultado for menor que 22.80 ele exibira sempre 22.80.. se maior exibe o resultado normal..
       
      Então:
      Se valor for x (x <=22.80) ele exibe 22.80
       
      Fiddle:
      https://jsfiddle.net/elevafoco/qafkqgjg/13/ (Exemplo completo)
       
      Codigo reduzido (javascript):
      var circus = (total*0.95); var desconto = (circus*0.8771929824561404); var completo = formatacao.format(desconto.toPrecision(4)); $(".diff").html(completo); HTML:
      <label>Valor :</label> <div id="diff" class='diff' style='border: 1px solic #ccc'> </div> Obs: Já vi varias opções, mais nenhuma que mudasse apenas o campo de resultado sem "altert" sem nada.. somente o campo do resultado.
    • Por Madk
      Bom, estou penando pra conseguir fazer isso e nao to conseguindo, nao achei ninguem ensinando de forma que eu entenda ou da forma que eu precisava. Eu estou fazendo um programa tipo um caixa eletronico onde tem a a classe TDepositar que recebera o valor a ser depositado digitados no Jtextfield, eu queria pegar esse valor digitado convertendo para double , apos o Usuario clickar no OK, e mostrar na tela da classe TExtrato. Eu nao estou conseguindo converter esse valor e nao sei como mostrar ele na tela TExtrato. Se alguem puder me ajudar agradeco :)
       
      Classe TDepositar (tentei converter para double apos clickar no ok)
      package Trab; import java.awt.Container;   import java.awt.GridLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.JButton;   import javax.swing.JFrame;   import javax.swing.JLabel;   import javax.swing.JOptionPane;    import javax.swing.JTextField;   public class TDepositar extends JFrame{       JButton voltar = new JButton("voltar");       JButton ok = new JButton("ok");     JTextField deposito = new JTextField();     double valor;     public TDepositar (){           super("Depositar");           Container c = getContentPane();         c.setLayout(new GridLayout(3,2));           c.add(new JLabel ("Quanto deseja depositar:"));           c.add(deposito);          ok.addActionListener(new ActionListener() {             @SuppressWarnings("deprecation")             public void actionPerformed(ActionEvent e){              valor = Double.parseDouble(deposito.getText());              new TCaixa().show();              dispose();             }         });         c.add(ok);                  voltar.addActionListener(new ActionListener() {             @SuppressWarnings("deprecation")             public void actionPerformed(ActionEvent e){             new TCaixa().show();              dispose();             }         });         c.add(voltar);         setSize(300,200);         setDefaultCloseOperation(EXIT_ON_CLOSE);     } }  
      Classe TExtrato
       
      package Trab; import java.awt.Container;   import java.awt.GridLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.JButton;   import javax.swing.JFrame;   import javax.swing.JLabel;   import javax.swing.JOptionPane;    import javax.swing.JTextField;   public class TExtrato extends JFrame{       JButton voltar = new JButton("Voltar");       JButton ok = new JButton("ok");     public TExtrato (){           super("Extrato");           Container c = getContentPane();           c.setLayout(new GridLayout(3,2));           c.add(new JLabel ("Nome:"));         c.add(new JLabel ("Numero da conta:"));         c.add(new JLabel ("Saldo atual:"));         c.add(new JLabel ("Saques realizados hoje:"));                  ok.addActionListener(new ActionListener() {             @SuppressWarnings("deprecation")             public void actionPerformed(ActionEvent e){             new TCaixa().show();              dispose();             }         });         c.add(ok);                  voltar.addActionListener(new ActionListener() {             @SuppressWarnings("deprecation")             public void actionPerformed(ActionEvent e){             new TCaixa().show();              dispose();             }         });         c.add(voltar);         setSize(300,200);         setDefaultCloseOperation(EXIT_ON_CLOSE);     }   }
    • Por lorenadutra
      Bom dia!
      Eu tenho uma aplicação web que está rodando apenas localmente, preciso liberar esta aplicação para que os outros usuários possam acessar, eu preciso que  a aplicação funcione offline e fique online apenas quando o usuário fizer determinada ação no sistema. 
      Alguém pode me dar um ideia do que preciso? e se é possível também.
    • Por bssouza
      Me deparei com está situação em uma das maquinas que administro e não estou conseguindo solucionar, a mesma aparece com vários javas instalados sendo que na realidade há apenas um. Neste foto que estou colocando para ilustrar a situação aparecem 3 programas instalados. Na Pasta do Arquivo de Programas só há uma instalação. Já utilizei o programa recomendado pela Java para desinstalação do mesmo e não houve resultado. Alguém pode me auxiliar, obrigado !