Trabalhando Com HTML5

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
Nome
Email
});//Altera o item selecionado na tabela

alert("Informaes editadas.")
operacao = "A"; //Volta ao padro
return true;
}
Listagem 5: funo Excluir

function Excluir(){
tbClientes.splice(indice_selecionado, 1);
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(){
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
Nome
Email
});
tbClientes.push(cliente);
alert("Registro adicionado.");
return true;
}
function Editar(){
tbClientes[indice_selecionado] = JSON.stringify({
Codigo
Nome
Email
});//Altera o item selecionado na tabela

alert("Informaes editadas.")
operacao = "A"; //Volta ao padro
return true;
}
function Excluir(){
tbClientes.splice(indice_selecionado, 1);
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";
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(){
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

Trabalhando Com HTML5

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Trabalhando Com HTML5

Загружено:

Авторское право:

Доступные форматы

Trabalhando com

HTML5 Local Storage

Para quem ainda no conhece, o Local Storage um recurso

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

Vale observar que fazemos referncia a dois arquivos JavaScript. O

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

A varivel operacao ser utilizada para definir se o usurio est

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

Listagem 4: funo Editar

});//Altera o item selecionado na tabela

Listagem 5: funo Excluir

Listagem 6: funo Listar

Vale observar que na primeira coluna da tabela, adicionamos duas

podem ser duas quaisquer (utilizei dimenses 16x16 para ficar

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

Listagem 9: evento onClick dos botes Excluir

As rotinas utilizadas so bem simples, no nos aprofundamos mais

});//Altera o item selecionado na tabela

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

possvel visualizar como a pgina ficar.

Figura 1: Pgina em funcionamento

Leia mais em: Trabalhando com HTML5 Local Storage e

Вам также может понравиться