Publicidade

borehtech

Members
  • Total de itens

    3
  • Registro em

  • Última visita

Reputação

0 Comum

Sobre borehtech

  • Data de Nascimento
  1. 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 :(
  2. 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>
  3. 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>