Trabalhando com
Trabalhando com
HTML5 Local Storage
HTML5 Local Storage
e JSON
e JSON
Ve
Ve
ja neste artigo como criar
ja neste artigo como criar um cadastro simples,
um cadastro simples,
armazenando dados no Local
armazenando dados no Local Storage do HTML 5
Storage do HTML 5
usando JSON
usando JSON
9 9Gostei (15)
Gostei (15)
(1)
(1)
!ara "uem ainda n#o conhece, o
!ara "uem ainda n#o conhece, o
Local Storage é um recurso
Local Storage é um recurso
do
do
HTML 5
HTML 5
"ue $unciona, assim podemos dizer, como um coo%ie "ue
"ue $unciona, assim podemos dizer, como um coo%ie "ue
n#o possui tempo para e&pirar Ou seja, ' um
n#o possui tempo para e&pirar Ou seja, ' um
local para se armazenar
local para se armazenar
dados "ue n#o s#o perdidos ao $im da se(#o, logo, podemos $echar e
dados "ue n#o s#o perdidos ao $im da se(#o, logo, podemos $echar e
abrir o bro)ser *+rias *ezes e
abrir o bro)ser *+rias *ezes e
as in$orma(es gra*adas
as in$orma(es gra*adas
permanecer#o l+
permanecer#o l+
Neste artigo, *eremos como utilizar o local storage na pr+tica, criando
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
um cadastro simples de clientes, com as opera(es b+sicas de -./0
N#o *amos nos ater a"ui
N#o *amos nos ater a"ui
ao design e
ao design e
sim 1s suas $uncionalidades No
sim 1s suas $uncionalidades No
c2digo3$onte dispon4*el no topo desta p+gina, por'm, a
c2digo3$onte dispon4*el no topo desta p+gina, por'm, a
inter$ace est+
inter$ace est+
aprimorada
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 os
registros 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
-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 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*//:ltera o item +elecio'ado 'a ta4ela
localStorage0+et?tem7&t4Clie'te+& JSON0+tri'gi,(7t4Clie'te+88* 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*
localStorage0+et?tem7&t4Clie'te+& JSON0+tri'gi,(7t4Clie'te+88* alert7&@egi+tro e)cl#do0&8*
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)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
i'dice=+elecio'ado % ar+e?'t767thi+80attr7&alt&88* 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
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 ,#'ctio' Editar789 t4Clie'te+i'dice=+elecio'ado % 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*//:ltera o item +elecio'ado 'a ta4ela
localStorage0+et?tem7&t4Clie'te+& JSON0+tri'gi,(7t4Clie'te+88* 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* localStorage0+et?tem7&t4Clie'te+& JSON0+tri'gi,(7t4Clie'te+88* 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&* 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* 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*
