Trabalhando Com HTML5

Trabalhando com HTML5 Local Storage e JSON Veja Ve ja 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 recurso do HTML 5 "ue 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

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 HTML5 Storage com JSON s imagens ?editpng@ e ?deletepng@ est#o dispon4*eis no c2digo3$onte, mas

podem ser duas "uais"uer 7utilizei dimenses 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,7oeracao %% &:&8 ret#r' :dicio'ar78* el+e ret#r' Editar78* F8*

 >os botes 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 botes Bditar  67&04t'Editar&804i'd7&clic& ,#'ctio'789 oeracao % &E&* i'dice=+elecio'ado % ar+e?'t767thi+80attr7&alt&88* $ar cli % JSON0ar+e7t4Clie'te+i'dice=+elecio'ado8* 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 botes 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(esjs Listagem 109 >r"ui*o $uncoesjs 67,#'ctio'789 $ar oeracao % &:&* //&:&%: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+ % JSON0ar+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 F8*

 67&Gt)tEmail&80$al78

 

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 oeracao % &:&* //Iolta ao adro 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

 

&&K &

&K

&

&K

&

Cdigo&K

&

Nome&K

&

Tele,o'e&K

&

Email&K

&

&K

 

&&K

 

&&K

 

&& 8* ,or7$ar i i' t4Clie'te+89 $ar cli % JSON0ar+e7t4Clie'te+i8* 67&Gt4lLi+tar t4od(&80ae'd7&&8*

67&Gt4lLi+tar t4od(&80ae'd7&&8* 67&Gt4lLi+tar t4od(&80ae'd7&&Kcli0CodigoK&&8* 67&Gt4lLi+tar t4od(&80ae'd7&&Kcli0NomeK&&8* 67&Gt4lLi+tar t4od(&80ae'd7&&Kcli0Tele,o'eK&&8* 67&Gt4lLi+tar t4od(&80ae'd7&&Kcli0EmailK&&8* 67&Gt4lLi+tar t4od(&80ae'd7&&8* F F 67&G,rmCada+tro&804i'd7&+#4mit&,#'ctio'789 i,7oeracao %% &:&8 ret#r' :dicio'ar78*  

el+e ret#r' Editar78*

F8*

67&04t'Editar&804i'd7&clic& ,#'ctio'789 oeracao % &E&* i'dice=+elecio'ado % ar+e?'t767thi+80attr7&alt&88* $ar cli % JSON0ar+e7t4Clie'te+i'dice=+elecio'ado8*  

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/trabalhandocomhtml5localstoragee  !son/"#$%5&i'(()n)i*+,$$