Anda di halaman 1dari 12

Trabalhando com

HTML5 Local Storage


e JSON
Veja neste artigo como criar um cadastro simples,
armazenando dados no Local Storage do HTML 5
usando JSON.
9

Gostei (15)

(1)

Para quem ainda no conhece, o Local Storage um recurso


do HTML 5 que funciona, assim podemos dizer, como um cookie que
no possui tempo para expirar. Ou seja, um local para se armazenar
dados que no so perdidos ao fim da seo, logo, podemos fechar e
abrir o browser vrias vezes e as informaes gravadas
permanecero l.
Neste artigo, veremos como utilizar o local storage na prtica, criando
um cadastro simples de clientes, com as operaes bsicas de CRUD.
No vamos nos ater aqui ao design e sim s suas funcionalidades. No
cdigo-fonte disponvel no topo desta pgina, porm, a interface est
aprimorada.

Inicialmente, vejamos a estrutura do nosso HTML, a qual bastante


simples. Constitui-se apenas de um formulrio com 4 campos (para
operaes de adio e edio de registros) e uma tabela para listar os
registros existentes.
Listagem 1: estrutura do HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Storage com JSON</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf8" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="funcoes.js"></script>
</head>
<body>
<form id="frmCadastro">
<ul>
<li>
<label for="txtCodigo">Cdigo:</label>
<input type="text" id="txtCodigo"/>
</li>
<li>
<label for="txtNome">Nome:</label>
<input type="text" id="txtNome"/>
</li>
<li>
<label
for="txtTelefone">Telefone:</label>
<input type="text" id="txtTelefone"/>
</li>
<li>
<label for="txtEmail">Email:</label>
<input type="text" id="txtEmail"/>
</li>
<li>
<input type="submit" value="Salvar"
id="btnSalvar"/>

</li>
</ul>
</form>
<table id="tblListar">
</table>
</body>
</html>

Vale observar que fazemos referncia a dois arquivos JavaScript. O


primeiro da jQuery e o segundo o nosso arquivo contendo as
funes que trataro o cadastro propriamente dito.
Durante este artigo, utilizaremos algumas funes do JavaScript que
merecem ateno especial, so elas:
localStorage.setItem(nome, valor): esta funo utilizada para
armazenar um valor no local storage. Cada objeto gravado
referenciado por uma chave (nome).
localStorage.getItem(nome): por sua vez, o getItem usado
para recuperar um valor armazenado a partir da sua chave
identificadora.
JSON.stringfy(objeto): para armazenar os dados, utilizaremos o
formato JSON e esta funo transforma um objeto em string
com sintaxe adequado ao JSON.
JSON.parse(objeto): j a funo parse transforma um item no
formato JSON no seu formato original.

Criemos, ento, nosso arquivo funes.js e nele utilizaremos tambm


a sintaxe jQuery, logo, todo contedo dever ficar no corpo da funo
que executada ao carregar a pgina.
Primeiramente, definiremos algumas variveis globais que sero
necessrias para manipular os dados.
Listagem 2: definio de variveis globais
$(function(){
var operacao = "A"; //"A"=Adio; "E"=Edio
var indice_selecionado = -1; //ndice do item selecionado na
lista
var tbClientes = localStorage.getItem("tbClientes");// Recupera
os dados armazenados
tbClientes = JSON.parse(tbClientes); // Converte string para
objeto
if(tbClientes == null) // Caso no haja contedo, iniciamos um
vetor vazio
tbClientes = [];
});

A varivel operacao ser utilizada para definir se o usurio est


adicionando ou editando um registro. ndice_selecionado servir
para referenciarmos o registro selecionado na tabela. tbClientes
nossa tabela de clientes e a iniciamos com o valor recuperado do
local storage (salvo com a chave tbClientes). Caso no haja
contedo, inicializamos a varivel como um vetor vazio.
Por padro, a varivel operacao ter valor A, ou seja, caso o
usurio digite as informaes e clique no boto para salvar os dados,
um novo registro ser adicionado, exceto quando tiver clicado em um
item na tabela para edit-lo.

Agora vamos s funes do CRUD. Utilizaremos 4 funes: Adicionar,


Editar, Excluir e Listar. Vejamos o cdigo:
Listagem 3: funo Adicionar
function Adicionar(){
var cliente = JSON.stringify({
Codigo

: $("#txtCodigo").val(),

Nome

: $("#txtNome").val(),

Telefone : $("#txtTelefone").val(),
Email

: $("#txtEmail").val()

});
tbClientes.push(cliente);
localStorage.setItem("tbClientes", JSON.stringify(tbClientes));
alert("Registro adicionado.");
return true;
}

Listagem 4: funo Editar


function Editar(){
tbClientes[indice_selecionado] = JSON.stringify({
Codigo

: $("#txtCodigo").val(),

Nome

: $("#txtNome").val(),

Telefone : $("#txtTelefone").val(),
Email

: $("#txtEmail").val()

});//Altera o item selecionado na tabela


localStorage.setItem("tbClientes", JSON.stringify(tbClientes));
alert("Informaes editadas.")
operacao = "A"; //Volta ao padro
return true;
}

Listagem 5: funo Excluir


function Excluir(){
tbClientes.splice(indice_selecionado, 1);
localStorage.setItem("tbClientes", JSON.stringify(tbClientes));
alert("Registro excludo.");
}

Listagem 6: funo Listar


function Listar(){
$("#tblListar").html("");
$("#tblListar").html(
"<thead>"+
"

<tr>"+

"

<th></th>"+

"

<th>Cdigo</th>"+

"

<th>Nome</th>"+

"

<th>Telefone</th>"+

"

<th>Email</th>"+

"

</tr>"+

"</thead>"+
"<tbody>"+
"</tbody>"
);
for(var i in tbClientes){
var cli = JSON.parse(tbClientes[i]);
$("#tblListar tbody").append("<tr>");
$("#tblListar tbody").append("<td><img src='edit.png'
alt='"+i+"'
class='btnEditar'/><img src='delete.png' alt='"+i+"'
class='btnExcluir'/></td>");
$("#tblListar
tbody").append("<td>"+cli.Codigo+"</td>");
$("#tblListar tbody").append("<td>"+cli.Nome+"</td>");
$("#tblListar
tbody").append("<td>"+cli.Telefone+"</td>");
$("#tblListar tbody").append("<td>"+cli.Email+"</td>");
$("#tblListar tbody").append("</tr>");
}
}

Vale observar que na primeira coluna da tabela, adicionamos duas


imagens que serviro como botes de ao Editar e Excluir, cujo
evento onClick ser tratado via jQuery mais a frente. As imagens
edit.png e delete.png esto disponveis no cdigo-fonte, mas

podem ser duas quaisquer (utilizei dimenses 16x16 para ficar


discreto na tabela).
A funo Listar deve ser chamada no corpo da funo principal, para
que a tabela seja atualizada sempre que a pgina for recarregada.
Agora resta tratar os eventos dos controles HTML que acionaro as
funes de CRUD. Para gravar os dados do novo registro ou do
registro em edio, utilizamos o evento onSubmit do form
frmCadastro. Observemos o cdigo seguinte:
Listagem 7: evento onSubmit do form
$("#frmCadastro").bind("submit",function(){
if(operacao == "A")
return Adicionar();
else
return Editar();
});

Aos botes de ao Editar e Excluir, por outro lado, foram atribudas


classes btnEditar e btnExcluir, a partir das quais trataremos o
evento onClick:
Listagem 8: evento onClick dos botes Editar
$(".btnEditar").bind("click", function(){
operacao = "E";
indice_selecionado = parseInt($(this).attr("alt"));
var cli = JSON.parse(tbClientes[indice_selecionado]);
$("#txtCodigo").val(cli.Codigo);
$("#txtNome").val(cli.Nome);
$("#txtTelefone").val(cli.Telefone);
$("#txtEmail").val(cli.Email);
$("#txtCodigo").attr("readonly","readonly");

$("#txtNome").focus();
});

Listagem 9: evento onClick dos botes Excluir


$(".btnExcluir").bind("click", function(){
indice_selecionado = parseInt($(this).attr("alt"));
Excluir();
Listar();
});

As rotinas utilizadas so bem simples, no nos aprofundamos mais


nas validaes e tratamento de erros, por exemplo. No entanto, no
cdigo-fonte do artigo o cdigo est um pouco mais complexo, com
algumas funcionalidades a mais.
Abaixo voc pode ver o cdigo-fonte do arquivo de funes.js
Listagem 10: Arquivo funcoes.js
$(function(){
var operacao = "A"; //"A"=Adio; "E"=Edio
var indice_selecionado = -1; //ndice do item selecionado na lista
var tbClientes = localStorage.getItem("tbClientes");// Recupera os
dados armazenados
tbClientes = JSON.parse(tbClientes); // Converte string para
objeto
if(tbClientes == null) // Caso no haja contedo, iniciamos um
vetor vazio
tbClientes = [];
});
function Adicionar(){
var cliente = JSON.stringify({
Codigo

: $("#txtCodigo").val(),

Nome

: $("#txtNome").val(),

Telefone : $("#txtTelefone").val(),
Email
});

: $("#txtEmail").val()

tbClientes.push(cliente);
localStorage.setItem("tbClientes", JSON.stringify(tbClientes));
alert("Registro adicionado.");
return true;
}
function Editar(){
tbClientes[indice_selecionado] = JSON.stringify({
Codigo

: $("#txtCodigo").val(),

Nome

: $("#txtNome").val(),

Telefone : $("#txtTelefone").val(),
Email

: $("#txtEmail").val()

});//Altera o item selecionado na tabela


localStorage.setItem("tbClientes", JSON.stringify(tbClientes));
alert("Informaes editadas.")
operacao = "A"; //Volta ao padro
return true;
}
function Excluir(){
tbClientes.splice(indice_selecionado, 1);
localStorage.setItem("tbClientes", JSON.stringify(tbClientes));
alert("Registro excludo.");
}
function Listar(){
$("#tblListar").html("");
$("#tblListar").html(
"<thead>"+
"

<tr>"+

"

<th></th>"+

"

<th>Cdigo</th>"+

"

<th>Nome</th>"+

"

<th>Telefone</th>"+

"

<th>Email</th>"+

"

</tr>"+

"</thead>"+
"<tbody>"+
"</tbody>"
);
for(var i in tbClientes){
var cli = JSON.parse(tbClientes[i]);
$("#tblListar tbody").append("<tr>");

$("#tblListar tbody").append("<td><img src='edit.png'


alt='"+i+"'
class='btnEditar'/><img src='delete.png' alt='"+i+"'
class='btnExcluir'/></td>");
$("#tblListar tbody").append("<td>"+cli.Codigo+"</td>");
$("#tblListar tbody").append("<td>"+cli.Nome+"</td>");
$("#tblListar tbody").append("<td>"+cli.Telefone+"</td>");
$("#tblListar tbody").append("<td>"+cli.Email+"</td>");
$("#tblListar tbody").append("</tr>");
}
}
$("#frmCadastro").bind("submit",function(){
if(operacao == "A")
return Adicionar();
else
return Editar();
});

$(".btnEditar").bind("click", function(){
operacao = "E";
indice_selecionado = parseInt($(this).attr("alt"));
var cli = JSON.parse(tbClientes[indice_selecionado]);
$("#txtCodigo").val(cli.Codigo);
$("#txtNome").val(cli.Nome);
$("#txtTelefone").val(cli.Telefone);
$("#txtEmail").val(cli.Email);
$("#txtCodigo").attr("readonly","readonly");
$("#txtNome").focus();
});
$(".btnExcluir").bind("click", function(){
indice_selecionado = parseInt($(this).attr("alt"));
Excluir();
Listar();
});

Na
Figura 1

possvel visualizar como a pgina ficar.

Figura 1: Pgina em funcionamento


Ento, por hoje s, pessoal. Ponho-me a disposio para sanar
qualquer dvida sobre o artigo, basta comentar logo abaixo

Leia mais em: Trabalhando com HTML5 Local Storage e


JSON http://www.devmedia.com.br/trabalhando-com-html5-local-storage-ejson/29045#ixzz3n3iIfk00