Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>Carregando comentários...