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 Americoneto3
      quero fazer um projeto bem simples,quero fazer um programa q eu ensine a ele.
      Tipo,eu vou colocar ato falante no arduino e microfone p eu falar,ensino tipo,quando alguem falar 'oi' para ele,ele responda com a voz que eu programar 'ola',eu queria "ensinar" varias coisas ate ele quase entender tudo o que eu disser...precisarei colocar memoria ssd para armazenar as falas?
      nunca fiz um software ou programa antes,mas tenho vontade de fazer,
      para eu fazer esse meu projeto,de que componentes precisarei e se eu preciso aprender alguma coisa de programaçao complexa,me ajudem
      Eu preciso ser experiente para fazer isso?existe algum curso que eu possa fazer para aprender(online)?
    • Por renatolmb
      Bom dia pessoal,
      Tenho um formulário em JSF e estou precisando inserir os dados dele no banco de dados Já pesquisei de várias formas, mas não está funcionado
      Poderiam me dar uma ajuda no que estou fazendo de errado?
      Não estou conseguindo passar o parametro do que esta sendo digitado para a inserção no banco de dados
      Não consigo ver por exemplo o conteúdo do jsf digitado no bean
       
      ManagedBean
      @ManagedBean(name="UsuarioJDCBDAO") (...) public void inserir(Usuario usuario) { try { Connection conexao = getConexao(); String value = null; Statement stmt = null; conexao.createStatement().execute("SET IDENTITY_INSERT "+"tbplan"+" ON"); stmt = conexao.createStatement(); ResultSet rs = stmt.executeQuery("select MAX(id) + 1 from tbplan"); while (rs.next()) value = rs.getString(1).toString(); System.out.println(value); PreparedStatement pstm = conexao.prepareStatement("Insert into tbplan (data, nome, frase, id) values (?,?,?,?)"); //String name = new Usuario().getNome(); //pstm.setDate(1, new java.sql.Date(usuario.getDataCadastro().getTime())); pstm.setString(1, "26 Jun 2017 14:28:00:00"); pstm.setString(2, usuario.getNome()); // pstm.setString(2, n1.getNome()); pstm.setString(3, usuario.getFrase()); pstm.setString(4, value); pstm.execute(); conexao.createStatement().execute("SET IDENTITY_INSERT "+"tbplan"+" OFF"); pstm.close(); conexao.close(); } catch (Exception e) { e.printStackTrace(); } } (...)  
      Classe usuário
      import java.io.Serializable; import java.util.Date; public class Usuario implements Serializable { private static final long serialVersionUID = -309513637403441998L; private Long id; private Date dataCadastro; private String nome; private String frase; public Long getId() { return id; } public void setId(Long id) { this.id = id; } public Date getDataCadastro() { return dataCadastro; } public void setDataCadastro(Date dataCadastro) { this.dataCadastro = dataCadastro; } public String getNome() { return nome; } public void setNome(String nome) { this.nome = nome; } public String getFrase() { return frase; } public void setFrase(String frase) { this.frase = frase; } @Override public String toString() { return "Usuario [nome=" + nome + ", frase=" + frase + ", dataCadastro=" + dataCadastro + " id=" + id + "]"; } }  
      JSF
       
      <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui" template="/paginas/default/main.xhtml"> <ui:define name="content"> <h1 class="page-header "> <i class="fa fa-comments"></i> Formulário </h1> <div class="form-group"> <div class="col-xs-2"> <h:form> <b><h:outputText value="Nome: " /></b> <h:inputText class="form-control" id="nome" value="" /> <br style="clear: left;" /> </h:form> <h:form> <b><h:outputText value="Data: " /></b> <h:inputText class="form-control" value="#{now}"> <f:convertDateTime pattern="dd/MM/yyyy HH:mm" timeZone="America/Sao_Paulo"/> </h:inputText> <br style="clear: left;" /> </h:form> </div> <div class="col-md-8"> <h:form> <td valign="top"> <b><h:outputText title="Ajuda" value="Frase: " /></b> </td> <h:inputTextarea class="form-control" cols="80" rows="8" id="frase" value="" /> </h:form> </div> </div> <br style="clear: left;" /> <div class="container"> </div> <div class="col-xs-2"> <h:form> <h:commandButton id="submitBtn" var="item" value="Incluir" class="btn btn-success" action="#{UsuarioJDCBDAO.inserir(Usuario)}"> <f:param name="Nome" value="#{item.nome}" /> <f:param name="Data" value="#{item.dataCadastro}" /> <f:param name="Frase" value="#{item.frase}" /> </h:commandButton> </h:form> </div> </ui:define> </ui:composition>  
    • Por JosimarNew
      Bom dia, boa tarde e boa noite.
       
      Segue um problema que ainda não consegui a solução.
       
      Estou tentando capturar eventos do mouse fora da GUI do java. Tipo, eu quero transformar a tela do meu monitor em um plano cartesiano e a partir daí controlar meu mouse através da aplicação java uma vez iniciada. Não sei se fui bem claro más, o que quero com isso? Quero limitar o movimento do meu cursor baseado na resolução da tela de meu monitor, definir uma área nessa tela onde o monitor só poderá ser movimentar nessa área.
       
      Isso é possível com java, pois com C sei que é, só que quero implementar isso no java mesmo.
       
      Estou bem perto, já consigo capturar as coordenadas do mouse fora da GUI, agora preciso manipular os eventos para que eu possa controlar o cursor.
       
      Obrigado aqueles que se interessarem pelo tópico.
    • Por tulioto
      Preciso  pegar um arquivo .txt e a criar um novo arquivo .txt . Na primeira linha desse arquivo encontrarei um int M e na segunda linha um texto, devo gerar um novo arquivo que quebra a linha a cada M caracteres sem cortar no meio das palavras, sempre no espaços. como faço?
       
      Ex in.txt ;
      15
      Na primeira linha desse arquivo encontrarei um int M e na segunda linha um texto, devo gerar um novo arquivo que quebra a linha a
       
      Ex out.txt
      15
      Na primeira
      linha desse
      arquivo
      encontrarei
      um int M e na
      segunda
      ...
       
       
       
    • Por renanqueiroz12@bol.com.br
      Não sei como passar da linguagem que a gente faz na mão para a Java. O exercício é:
      "Faça um algoritmo que inverta os valores de um vetor de inteiros de 20 posições do início para o fim. O vetor a ser invertido deve primeiramente ser lido do teclado."
      Fiz assim:
      Algoritmo ____
      Início
      Tipo Ex01 = Vetor [1...20] de inteiros;
      Inteiros: Vet
      Para I de 1 até 20 passo 1, faça
      leia(vet);
      fimpara;
      Para I de 20 até 1 passo 1 faça
      Vet2[J] <- vet ;
      j <- j +1;
      fimpara;
      fim.