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

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

 

JSON.parse()

JSON.stringify()

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 Caio Marcio de Campo
      Quando tento abrir o StarTeam logo aparece a mensagem "Java_SDK1.8.0_121" is an unrecognized Java VM name. No micro estão instalados O Java e o Java SDK, coloquei-os nas pastas C:\Arquivos de Programas\Componentes\Java\JRE e C:\Arquivos de Programas\Componentes\Java\SDK e não tem em mais nenhum lugar (coloco nestas pastas para não ficar criando um monte delas com nomes de versões). Tenho que fazer alguma alteração específica em algum arquivo do StarTeam? Uso também o Eclipse. O nome Java SDK1.8.0_121 fui eu que coloquei, já tentei JRE, SDK, entre outros ...
    • Por pitanga
      Estou tentando fazer buscas em um index feito com Lucene que me foi enviado. São buscas simples que não estão dando certo...
       
      package portugues; //https://lucene.apache.org/core/2_9_4/queryparsersyntax.html import java.nio.file.Paths; import javax.management.Query; import org.apache.lucene.analysis.Analyzer; import org.apache.lucene.analysis.standard.StandardAnalyzer; import org.apache.lucene.index.DirectoryReader; import org.apache.lucene.index.IndexReader; import org.apache.lucene.queryparser.classic.QueryParser; import org.apache.lucene.search.IndexSearcher; import org.apache.lucene.store.FSDirectory; public class Buscador { public static void main(String[] args) { IndexReader reader = DirectoryReader.open(FSDirectory.open(Paths.get("/home/janaina/Bureau/projet_java/MyLuceneIndex"))); IndexSearcher searcher = new IndexSearcher(reader); Analyzer analyzer = new StandardAnalyzer(); QueryParser parser = new QueryParser("contents", analyzer); Query query1 = parser.parse("pomme"); Query query2 = parser.parse("pomme" AND "banane"); Query query3 = parser.parse("pomme" OR "banane"); Query query4 = parser.parse("pomme*"); System.out.println(query1); System.out.println(query2); System.out.println(query3); System.out.println(query4); } } Eu só preciso encontrar algumas palavras usando Query Parser Syntax. Desculpa se a pergunta é besta. É que sou iniciante... Obrigada! Se alguém tiver outra sugestão, agradeço também!
    • Por Gustavo Arruda
      Identifiquei um bug ao utilizar uma variável combo box numérica com casas decimais no GX Ev3. Nas versões Ev1 e Ev2 o mesmo exemplo funciona perfeitamente.
      Eu não sou bom em escrever, mas vou tentar descrever o problema. Se alguém não entender eu tento de novo!
      Quem puder me ajudar faça o seguinte:
      1 - Crie uma variável do tipo Numeric(7.2) no WebForm em uma WebPanel.
      2 - Na tela defina-a como um combo box com os valores inteiros ou quebrados:
      Exemplo:
      &CASA_DECIMAL.AddItem(100, "100%") &CASA_DECIMAL.AddItem(75, "75%") &CASA_DECIMAL.AddItem(50.00, "50%") &CASA_DECIMAL.AddItem(40.00, "40%") &CASA_DECIMAL.AddItem(35.15, "35,15%") 3 - Crie um evento Enter ou qualquer outro para "printar" o valor da variável de exemplo.
      3.1 - Por exemplo, ao selecionar a opção 75% e "printar" o valor através do evento, o valor muda para 7500,00, ao invés de 75,00.
      Exemplos:
      &CASA_DECIMAL.ToFormattedString() //- O resultado de 75%, é : 7500,00 &CASA_DECIMAL.ToString() // - O resultado de 75%, é: 7500.00. Estou usando GeneXus Ev3(update 11), gerando Java com JDK 1.8.0_101.
      Este problema só acontece quando a variável é um combo box. Quando é um input Edit, o valor é printado corretamente.
    • Por Guilherme Costa Lopes
      Ao tentar iniciar uma página do sistema mostra este erro.
      Vou colocar os códigos:
      DAO
      package br.com.netsoft.desif.dao.endereco; import java.io.Serializable; import java.util.List; import javax.persistence.EntityManager; import javax.persistence.Query; import br.com.netsoft.desif.model.endereco.PaisEntity; public class PaisDao implements Serializable { private static final long serialVersionUID = 1402488530698938353L; final private String hql = " p FROM PaisEntity p "; EntityManager em; public List<PaisEntity> listarPaises() { StringBuilder hqlSelect = new StringBuilder(hql); final String query = "SELECT " + hqlSelect; Query querySelect = em.createQuery(query); @SuppressWarnings("unchecked") List<PaisEntity> resultList = querySelect.getResultList(); return resultList; } }
      ENTITY
      package br.com.netsoft.desif.model.endereco; import java.io.Serializable; import javax.persistence.Column; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.SequenceGenerator; public class PaisEntity implements Serializable { private static final long serialVersionUID = 7784827196506672790L; private Long id; private String descricao; @Id @Column(name = "pai_id") @SequenceGenerator(name = "enderecos.end_pais_pai_id_seq", sequenceName = "enderecos.end_pais_pai_id_seq", allocationSize = 1) @GeneratedValue(generator = "enderecos.end_pais_pai_id_seq", strategy = GenerationType.SEQUENCE) public Long getId() { return id; } public void setId(Long id) { this.id = id; } @Column(name = "pai_descricao") public String getDescricao() { return descricao; } public void setDescricao(String descricao) { this.descricao = descricao; } }
      CONTROLLER
      package br.com.netsoft.desif.controler.endereco; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import javax.annotation.PostConstruct; import javax.enterprise.context.RequestScoped; import javax.faces.bean.ManagedBean; import br.com.netsoft.desif.dao.endereco.PaisDao; import br.com.netsoft.desif.model.endereco.PaisEntity; @ManagedBean(name = "paisControler") @RequestScoped public class PaisControler extends PaisEntity { private static final long serialVersionUID = -8396738159447021720L; private List<PaisEntity> paises; private PaisDao paisDao; public List<PaisEntity> getPaises() { if (paises == null) { return new ArrayList<PaisEntity>(); } return paises; } public void setPaises(List<PaisEntity> paises) { this.paises = paises; } @PostConstruct public void init() { System.out.println("Página inicial de países."); @SuppressWarnings("unused") List<PaisEntity> paisesBusca = paisDao.listarPaises(); ArrayList<PaisEntity> paises = (ArrayList<PaisEntity>) paisDao.listarPaises(); for (Iterator<?> iterator = paises.iterator(); iterator.hasNext();) { PaisEntity pais = (PaisEntity) iterator.next(); pais.setId(pais.getId()); pais.setDescricao(pais.getDescricao()); paises.add(pais); } this.setPaises(paises); } public String getMensagem() { return "Teste"; } }
      VISÃO
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"> <h:head> <title>Hello JSF!</title> </h:head> <h:body> #{paisControler.mensagem} <h:dataTable var="pais" value="#{paisControler.paises}"> <h:column headerText="Id"> <h:outputText value="#{pais.id}" /> </h:column> <h:column headerText="Year"> <h:outputText value="#{pais.descricao}" /> </h:column> </h:dataTable> </h:body> </html>
      Erro:

       
      mar 21, 2017 8:08:40 AM com.sun.faces.application.view.FaceletViewHandlingStrategy handleRenderException GRAVE: Error Rendering View[/public/index.xhtml] javax.el.ELException: /public/index.xhtml: Um erro ocorreu ao realizar a injeção de recurso no bean gerenciado paisControler at com.sun.faces.facelets.compiler.TextInstruction.write(TextInstruction.java:90) at com.sun.faces.facelets.compiler.UIInstructions.encodeBegin(UIInstructions.java:82) at com.sun.faces.facelets.compiler.UILeaf.encodeAll(UILeaf.java:183) at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1859) at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1859) at com.sun.faces.application.view.FaceletViewHandlingStrategy.renderView(FaceletViewHandlingStrategy.java:443) at com.sun.faces.application.view.MultiViewHandler.renderView(MultiViewHandler.java:131) at javax.faces.application.ViewHandlerWrapper.renderView(ViewHandlerWrapper.java:337) at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:120) at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101) at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:219) at javax.faces.webapp.FacesServlet.service(FacesServlet.java:647) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:230) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:165) at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:192) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:165) at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:198) at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96) at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:478) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:140) at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:80) at org.apache.catalina.valves.AbstractAccessLogValve.invoke(AbstractAccessLogValve.java:624) at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:87) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:341) at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:783) at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66) at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:798) at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1441) at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49) at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source) at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source) at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) at java.lang.Thread.run(Unknown Source) Caused by: com.sun.faces.mgbean.ManagedBeanCreationException: Um erro ocorreu ao realizar a injeção de recurso no bean gerenciado paisControler at com.sun.faces.mgbean.BeanBuilder.invokePostConstruct(BeanBuilder.java:227) at com.sun.faces.mgbean.BeanBuilder.build(BeanBuilder.java:103) at com.sun.faces.mgbean.BeanManager.createAndPush(BeanManager.java:409) at com.sun.faces.mgbean.BeanManager.create(BeanManager.java:269) at com.sun.faces.el.ManagedBeanELResolver.resolveBean(ManagedBeanELResolver.java:244) at com.sun.faces.el.ManagedBeanELResolv
    • Por Guilherme Costa Lopes
      O que é este erro ?