trabalhando com html5

7/23/2019 Trabalhando Com HTML5

http://slidepdf.com/reader/full/trabalhando-com-html5 1/12

Trabalhando comHTML5 Local Storagee JSONVeja neste artigo como criar um cadastro simples,

armazenando dados no Local Storage do HTML 5

usando JSON

9

Gostei (15) (1)

!ara "uem ainda n#o conhece, o Local Storage é um recursodo HTML 5 "ue $unciona, assim podemos dizer, como um coo%ie "ue

n#o possui tempo para e&pirar Ou seja, ' um local para se armazenar

dados "ue n#o s#o perdidos ao $im da se(#o, logo, podemos $echar e

abrir o bro)ser *+rias *ezes e as in$orma(es gra*adas

permanecer#o l+

Neste artigo, *eremos como utilizar o local storage na pr+tica, criando

um cadastro simples de clientes, com as opera(es b+sicas de -./0

N#o *amos nos ater a"ui ao design e sim 1s suas $uncionalidades No

c2digo3$onte dispon4*el no topo desta p+gina, por'm, a inter$ace est+

aprimorada

http://www.devmedia.com.br/trabalhando-com-html5-local-storage-e-json/29045


http://www.devmedia.com.br/curso/curso-de-novidades-do-html-5/275


http://www.devmedia.com.br/curso/curso-de-novidades-do-html-5/275




nicialmente, *ejamos a estrutura do nosso HTML, a "ual ' bastante

simples -onstitui3se apenas de um $ormul+rio com 6 campos 7para

opera(es de adi(#o e edi(#o de registros8 e uma tabela para listar osregistros e&istentes

Listagem 19 estrutura do HTML

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Storage com JSON</title>

<meta htte"#i$%&Co'te'tT(e& co'te't%&te)t/html*char+et%#t,

-& />

<+crit t(e%&te)t/.a$a+crit&

+rc%&htt//code0."#er(0com/."#er(102030mi'0.+&></+crit>

<+crit t(e%&te)t/.a$a+crit& +rc%&,#'coe+0.+&></+crit>

</head>

<4od(>

<,orm id%&,rmCada+tro&>

<#l>

<li>

<la4el ,or%&t)tCodigo&>Cdigo</la4el>

<i'#t t(e%&te)t& id%&t)tCodigo&/>

</li>

<li>

<la4el ,or%&t)tNome&>Nome</la4el>

<i'#t t(e%&te)t& id%&t)tNome&/>

</li>

<li>

<la4el,or%&t)tTele,o'e&>Tele,o'e</la4el>

<i'#t t(e%&te)t& id%&t)tTele,o'e&/>

</li>

<li>

<la4el ,or%&t)tEmail&>Email</la4el>

<i'#t t(e%&te)t& id%&t)tEmail&/>

</li>

<li>

<i'#t t(e%&+#4mit& $al#e%&Sal$ar&

id%&4t'Sal$ar&/>



</li>

</#l>

</,orm>

<ta4le id%&t4lLi+tar&>

</ta4le>

</4od(>

</html>

Vale obser*ar "ue $azemos re$er:ncia a dois ar"ui*os Ja*aScript O

primeiro ' da j;uer< e o segundo ' o nosso ar"ui*o contendo as

$un(es "ue tratar#o o cadastro propriamente dito

0urante este artigo, utilizaremos algumas $un(es do Ja*aScript "ue

merecem aten(#o especial, s#o elas9

• localStoragesettem7nome, *alor89 esta $un(#o ' utilizada para

armazenar um *alor no local storage -ada objeto gra*ado '

re$erenciado por uma cha*e 7nome8

• localStoragegettem7nome89 por sua *ez, o gettem ' usado

para recuperar um *alor armazenado a partir da sua cha*e

identi$icadora

• JSONstring$<7objeto89 para armazenar os dados, utilizaremos o

$ormato JSON e esta $un(#o trans$orma um objeto em string

com sinta&e ade"uado ao JSON

• JSONparse7objeto89 j+ a $un(#o parse trans$orma um item no

$ormato JSON no seu $ormato original



-riemos, ent#o, nosso ar"ui*o $un(esjs e nele utilizaremos tamb'm

a sinta&e j;uer<, logo, todo conte=do de*er+ $icar no corpo da $un(#o

"ue ' e&ecutada ao carregar a p+gina

!rimeiramente, de$iniremos algumas *ari+*eis globais "ue ser#o

necess+rias para manipular os dados

Listagem 29 de$ini(#o de *ari+*eis globais

67,#'ctio'789

$ar oeracao % &:&* //&:&%:di;o* &E&%Edi;o$ar i'dice=+elecio'ado % 1* //'dice do item +elecio'ado 'a

li+ta

$ar t4Clie'te+ % localStorage0get?tem7&t4Clie'te+&8*// @ec#era

o+ dado+ armaAe'ado+

t4Clie'te+ % JSON0ar+e7t4Clie'te+8* // Co'$erte +tri'g ara

o4.eto

i,7t4Clie'te+ %% '#ll8 // Ca+o 'o ha.a co'teBdo i'iciamo+ #m

$etor $aAio

t4Clie'te+ % *F8*

> *ari+*el ?operacao@ ser+ utilizada para de$inir se o usu+rio est+

adicionando ou editando um registro ?4ndiceAselecionado@ ser*ir+

para re$erenciarmos o registro selecionado na tabela ?tb-lientes@ '

nossa ?tabela de clientes@ e a iniciamos com o *alor recuperado do

local storage 7sal*o com a cha*e ?tb-lientes@8 -aso n#o haja

conte=do, inicializamos a *ari+*el como um *etor *azio

!or padr#o, a *ari+*el ?operacao@ ter+ *alor ?>@, ou seja, caso o

usu+rio digite as in$orma(es e cli"ue no bot#o para sal*ar os dados,

um no*o registro ser+ adicionado, e&ceto "uando ti*er clicado em um

item na tabela para edit+3lo



>gora *amos 1s $un(es do -./0 /tilizaremos 6 $un(es9 >dicionar,

Bditar, B&cluir e Listar Vejamos o c2digo9

Listagem 39 $un(#o >dicionar

,#'ctio' :dicio'ar789

$ar clie'te % JSON0+tri'gi,(79

Codigo 67&Gt)tCodigo&80$al78

Nome 67&Gt)tNome&80$al78

Tele,o'e 67&Gt)tTele,o'e&80$al78

Email 67&Gt)tEmail&80$al78

F8*

t4Clie'te+0#+h7clie'te8*

localStorage0+et?tem7&t4Clie'te+& JSON0+tri'gi,(7t4Clie'te+88*

alert7&@egi+tro adicio'ado0&8*

ret#r' tr#e*

F

Listagem 49 $un(#o Bditar

,#'ctio' Editar789

t4Clie'te+i'dice=+elecio'ado % JSON0+tri'gi,(79





F8*//:ltera o item +elecio'ado 'a ta4ela


alert7&?',orma;e+ editada+0&8

oeracao % &:&* //Iolta ao adro

ret#r' tr#e*F

Listagem 59 $un(#o B&cluir

,#'ctio' E)cl#ir789

t4Clie'te+0+lice7i'dice=+elecio'ado 18*


alert7&@egi+tro e)cl#do0&8*

F



Listagem 69 $un(#o Listar

,#'ctio' Li+tar789

67&Gt4lLi+tar&80html7&&8*

67&Gt4lLi+tar&80html7

&<thead>&K

& <tr>&K

& <th></th>&K

& <th>Cdigo</th>&K

& <th>Nome</th>&K

& <th>Tele,o'e</th>&K

& <th>Email</th>&K

& </tr>&K

&</thead>&K&<t4od(>&K

&</t4od(>&

8*

,or7$ar i i' t4Clie'te+89

$ar cli % JSON0ar+e7t4Clie'te+i8*

67&Gt4lLi+tar t4od(&80ae'd7&<tr>&8*

67&Gt4lLi+tar t4od(&80ae'd7&<td><img +rc%edit0'g

alt%&KiK&

cla++%4t'Editar/><img +rc%delete0'g alt%&KiK&cla++%4t'E)cl#ir/></td>&8*

67&Gt4lLi+tar

t4od(&80ae'd7&<td>&Kcli0CodigoK&</td>&8*

67&Gt4lLi+tar t4od(&80ae'd7&<td>&Kcli0NomeK&</td>&8*

67&Gt4lLi+tar

t4od(&80ae'd7&<td>&Kcli0Tele,o'eK&</td>&8*

67&Gt4lLi+tar t4od(&80ae'd7&<td>&Kcli0EmailK&</td>&8*

67&Gt4lLi+tar t4od(&80ae'd7&</tr>&8*

F

F

Vale obser*ar "ue na primeira coluna da tabela, adicionamos duas

imagens "ue ser*ir#o como botes de a(#o Bditar e B&cluir, cujo

e*ento on-lic% ser+ tratado *ia j;uer< mais a $rente >s imagens

?editpng@ e ?deletepng@ est#o dispon4*eis no c2digo3$onte, mas



podem ser duas "uais"uer 7utilizei dimenses CD&CD para $icar

?discreto@ na tabela8

> $un(#o Listar de*e ser chamada no corpo da $un(#o principal, para

"ue a tabela seja atualizada sempre "ue a p+gina $or recarregada

>gora resta tratar os e*entos dos controles HTML "ue acionar#o as

$un(es de -./0 !ara gra*ar os dados do no*o registro ou do

registro em edi(#o, utilizamos o e*ento onSubmit do $orm

$rm-adastro Obser*emos o c2digo seguinte9

Listagem 79 e*ento onSubmit do $orm

67&G,rmCada+tro&804i'd7&+#4mit&,#'ctio'789

i,7oeracao %% &:&8

ret#r' :dicio'ar78*

el+e

ret#r' Editar78*F8*

>os botes de a(#o Bditar e B&cluir, por outro lado, $oram atribu4das

classes ?btnBditar@ e ?btnB&cluir@, a partir das "uais trataremos o

e*ento on-lic%9

Listagem 89 e*ento on-lic% dos botes Bditar

67&04t'Editar&804i'd7&clic& ,#'ctio'789

oeracao % &E&*

i'dice=+elecio'ado % ar+e?'t767thi+80attr7&alt&88*

$ar cli % JSON0ar+e7t4Clie'te+i'dice=+elecio'ado8*

67&Gt)tCodigo&80$al7cli0Codigo8*

67&Gt)tNome&80$al7cli0Nome8*

67&Gt)tTele,o'e&80$al7cli0Tele,o'e8*

67&Gt)tEmail&80$al7cli0Email8*

67&Gt)tCodigo&80attr7&reado'l(&&reado'l(&8*



67&Gt)tNome&80,oc#+78*

F8*

Listagem 99 e*ento on-lic% dos botes B&cluir

67&04t'E)cl#ir&804i'd7&clic& ,#'ctio'789


E)cl#ir78*

Li+tar78*

F8*

>s rotinas utilizadas s#o bem simples, n#o nos apro$undamos mais

nas *alida(es e tratamento de erros, por e&emplo No entanto, no

c2digo3$onte do artigo o c2digo est+ um pouco mais comple&o, com

algumas $uncionalidades a mais

>bai&o *oc: pode *er o c2digo3$onte do ar"ui*o de $un(esjs

Listagem 109 >r"ui*o $uncoesjs

67,#'ctio'789

$ar oeracao % &:&* //&:&%:di;o* &E&%Edi;o

$ar i'dice=+elecio'ado % 1* //'dice do item +elecio'ado 'a li+ta

$ar t4Clie'te+ % localStorage0get?tem7&t4Clie'te+&8*// @ec#era o+

dado+ armaAe'ado+

t4Clie'te+ % JSON0ar+e7t4Clie'te+8* // Co'$erte +tri'g ara

o4.eto

i,7t4Clie'te+ %% '#ll8 // Ca+o 'o ha.a co'teBdo i'iciamo+ #m

$etor $aAio t4Clie'te+ % *

F8*

,#'ctio' :dicio'ar789

$ar clie'te % JSON0+tri'gi,(79





F8*



t4Clie'te+0#+h7clie'te8*


alert7&@egi+tro adicio'ado0&8*

ret#r' tr#e*

F

,#'ctio' Editar789

t4Clie'te+i'dice=+elecio'ado % JSON0+tri'gi,(79





F8*//:ltera o item +elecio'ado 'a ta4ela


alert7&?',orma;e+ editada+0&8

oeracao % &:&* //Iolta ao adro

ret#r' tr#e*

F

,#'ctio' E)cl#ir789

t4Clie'te+0+lice7i'dice=+elecio'ado 18*


alert7&@egi+tro e)cl#do0&8*

F

,#'ctio' Li+tar789

67&Gt4lLi+tar&80html7&&8*

67&Gt4lLi+tar&80html7

&<thead>&K

& <tr>&K

& <th></th>&K

& <th>Cdigo</th>&K

& <th>Nome</th>&K & <th>Tele,o'e</th>&K

& <th>Email</th>&K

& </tr>&K

&</thead>&K

&<t4od(>&K

&</t4od(>&

8*

,or7$ar i i' t4Clie'te+89

$ar cli % JSON0ar+e7t4Clie'te+i8*

67&Gt4lLi+tar t4od(&80ae'd7&<tr>&8*



67&Gt4lLi+tar t4od(&80ae'd7&<td><img +rc%edit0'g

alt%&KiK&

cla++%4t'Editar/><img +rc%delete0'g alt%&KiK&

cla++%4t'E)cl#ir/></td>&8*

67&Gt4lLi+tar t4od(&80ae'd7&<td>&Kcli0CodigoK&</td>&8* 67&Gt4lLi+tar t4od(&80ae'd7&<td>&Kcli0NomeK&</td>&8*

67&Gt4lLi+tar t4od(&80ae'd7&<td>&Kcli0Tele,o'eK&</td>&8*

67&Gt4lLi+tar t4od(&80ae'd7&<td>&Kcli0EmailK&</td>&8*

67&Gt4lLi+tar t4od(&80ae'd7&</tr>&8*

F

F

67&G,rmCada+tro&804i'd7&+#4mit&,#'ctio'789

i,7oeracao %% &:&8

ret#r' :dicio'ar78*

el+e

ret#r' Editar78*

F8*

67&04t'Editar&804i'd7&clic& ,#'ctio'789

oeracao % &E&*


$ar cli % JSON0ar+e7t4Clie'te+i'dice=+elecio'ado8*

67&Gt)tCodigo&80$al7cli0Codigo8*

67&Gt)tNome&80$al7cli0Nome8*

67&Gt)tTele,o'e&80$al7cli0Tele,o'e8*

67&Gt)tEmail&80$al7cli0Email8*

67&Gt)tCodigo&80attr7&reado'l(&&reado'l(&8*

67&Gt)tNome&80,oc#+78*

F8*

67&04t'E)cl#ir&804i'd7&clic& ,#'ctio'789 i'dice=+elecio'ado % ar+e?'t767thi+80attr7&alt&88*

E)cl#ir78*

Li+tar78*

F8*

Na

Eigura C



' poss4*el *isualizar como a p+gina $icar+

Figura 1 !+gina em $uncionamento

Bnt#o, por hoje ' s2, pessoal !onho3me a disposi(#o para sanar

"ual"uer d=*ida sobre o artigo, basta comentar logo abai&o

Leia mais em: Trabalhando com HTML5 Local Storage e

JSON http://www.devmedia.com.br/trabalhandocomhtml5localstoragee

!son/"#$%5&i'(()n)i*+,$$

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








trabalhando com html5

Documents