Академический Документы
Профессиональный Документы
Культура Документы
Resumo:
Em sistemas tipicamente distribudos cliente-servidor, nos quais as aplicaes web
se encontram, o armazenamento das informaes feito geralmente em um servidor de
aplicao ou de banco de dados. Essa organizao, entretanto, no permite que as
aplicaes web funcionem sem que elas estejam conectadas a uma rede. Entretanto, h
casos nos quais podemos querer que um aplicativo funcione sem estar conectado a uma
rede (offline) e que, assim que se conectar a uma mais tarde, possa trocar informaes com
o servidor, sincronizando os dados, por exemplo. Vrias tecnologias foram desenvolvidas
ao longo dos anos, de modo a fornecer algum tipo de suporte ao armazenamento local de
dados. Porm, a maioria delas era apenas uma soluo paliativa, no padronizada, que
dependia de um nico navegador ou da instalao de programas de terceiros (plugins).
Assim, para cobrir a falta de uma soluo padro que pudesse ser adotada mundialmente
pelos desenvolvedores web, junto com a especificao do HTML5, surge ento uma nova
tecnologia, o Web storage, a qual veremos nesse artigo.
Introduo
As aplicaes web so tipicamente sistemas distribudos do tipo cliente-servidor1,
cujas informaes geralmente so armazenadas no lado servidor. No entanto, existem
vrios motivos pelos quais precisamos armazenar dados no lado cliente (dados locais). Por
exemplo, podemos querer que um aplicativo continue funcionando mesmo que o usurio
1
http://pt.wikipedia.org/wiki/Cliente-servidor
no esteja conectado a uma Internet (off-line) e que, assim que ele se conectar a uma, os
dados locais sejam, ento, transmitidos de modo a serem sincronizados com aqueles que
esto armazenados no lado servidor.
Num primeiro momento, essa necessidade de armazenamento de dados locais surge
principalmente em funo das caractersticas do prprio protocolo HTTP (HyperText
Transfer Protocol), usado nas comunicaes via web. O HTTP um protocolo de
comunicao requisio-resposta sem estado (stateless). Isso significa que o protocolo
HTTP trata as comunicaes de modo independente umas das outras, no mantendo dados
e/ou informaes de estado durante mltiplas requisies-respostas. Dessa forma, uma
transao que envolve mais de uma comunicao, para ser concluda, sem uma maneira de
armazenar dados localmente, no tem como ser realizada usando-se apenas o protocolo
HTTP.
Historicamente, o cookie foi o primeiro recurso criado para a web, para fazer o
armazenamento local de pequenas quantidades de dados. Ele foi projetado para ser um
mecanismo pelo qual os sites pudessem lembrar de informaes de estado (stateful), de
modo que uma transao que envolvesse mais de uma comunicao sob o protocolo HTTP
pudesse ser concluda (p.ex. a relao de itens em um carrinho de compras, as atividades
de navegao de um usurio, informaes de login, preferncias do usurio, menus
customizveis, etc.).
A utilizao dos cookies, no entanto, apresenta alguns problemas e/ou restries:
i)
ii) os dados em um cookie tem como origem apenas o servidor. O que significa
que, se quisermos armazenar dados do cliente em um cookie, precisamos
envi-los ao servidor primeiro, para que estes sejam reenviados novamente a
mquina cliente sob a fora de cookies;
iii) os cookies so includos em todas as requisies HTTP feitas ao servidor,
mesmo que estes dados no sejam necessrios. Isso significa que um mesmo
conjunto de dados so retransmitidos sempre ao servidor, consumindo recursos
de rede e processamentos desnecessrios, que acabam ocasionando atrasos
2
plugin: pequeno programa que no pode ser executado de forma independente e que funciona como um
mdulo de extenso, adicionando funcionalidades novas ou especficas a outros programas maiores.
Esse cenrio permaneceu por um bom perodo e s comeou a mudar a partir dos
ltimos anos com a exploso dos dispositivos mbiles e com o surgimento de uma nova
modalidade de software: os aplicativos nativos3.
Dessa nova onda surgiram tambm outras modalidades de softwares: aquelas
baseadas em aplicativos web, que basicamente fazem uso de recursos open-sources
(HTML, CSS, Javascript, etc.), e as hbridas, onde as duas tecnologias (nativo+web) se
misturam.
No cabe aqui fazermos uma avaliao dessas tecnologias. Atualmente, existe uma
grande discusso a respeito dos prs/contras, vantagens/desvantagens de cada uma delas e
essa discusso parece estar apenas comeando (JONES, 2012; MITRA , 2013; WHITNEY,
2012). No entanto, cabe aqui destacar que uma das principais vantagens das aplicaes
nativas sobre as aplicaes web o uso de armazenamento local que feito atravs do
sistema operacional do prprio equipamento do usurio, permitindo que os aplicativos
mantenham localmente os seus principais dados (preferncias do usurio, estado do
aplicativo em tempo de execuo, armazenamento e registro de informaes, etc.).
Web storage
Para cobrir a falta de uma soluo padro que substitusse os cookies e os plugins
no armazenamento local de dados das aplicaes web, junto com a especificao do
HTML5 (WHATWG, 2013; W3C, 2013), surge o Web storage, uma interface de
programao de aplicativos padronizada (ou API), implementado de forma nativa nos
navegadores web, sem a necessidade da instalao de plugins.
Programas construdos usando-se uma linguagem de programao especfica para um dado dispositivo tais
com, por exemplo: Objective-C usado no IOS, Java no Android, etc.
O limite de 5MB um valor sugerido pela especificao HTML5. No entanto, alguns os navegadores
podem adotar valores diferentes desse limite (maiores ou menores). Em certos navegadores possvel at
configurarmos a quantidade que desejamos alocar para o Web storage. No endereo http://devtest.nemikor.com/web-storage/support-test/ fornecido uma tabela com os valores adotados por algumas
plataformas, sendo possvel inclusive executarmos um teste local que verificar qual a capacidade de
armazenamento no Web storage do seu navegador.
5
O conceito de origem um termo definido no documento RFC6454: "The web origin concept"
(http://tools.ietf.org/html/rfc6454).
precisar fechar as abas do navegador, ele poder finalizar as compras mais tarde, pois os
dados do carrinho de compras armazenados no Local storage estaro disponveis para
quando o usurio voltar a visitar o site novamente.
Storage API
A Storage API uma interface padronizada que fornece os mtodos de acesso a
lista de pares chave/valor (itens) armazenados no Web storage. Esse acesso feito atravs
de dois objetos Storage API: sessionStorage e localStorage, associados a cada um
dos tipos de armazenamento. Assim, se quisermos acessar os dados armazenados na
Session storage, usamos o objeto sessionStorage e, para os dados no Local storage,
usamos localStorage.
A interface Storage disponibiliza os seguintes recursos:
length - atributo que retorna o nmero de itens que esto armazenados no objeto
Storage.
// Informa a quantidade de itens armazenados no objeto localStorage
alert(localStorage.length);
Internet Explorer 8+
Opera 10.5+
Firefox 3.5+
Chrome 4+
Safari 4+
dado (Exemplo-1).
Exemplo-1: Uso do mtodo setItem() para armazenar dados locais no Web storage.
localStorage.setItem("nome", "Fulano de Tal Filho");
sessionStorage.setItem("dolar", 2.31);
localStorage.setItem("assegurado", true);
localStorage.setItem("contagem", 5);
http://modernizr.com/downloads/modernizr-latest.js
http://pt.wikipedia.org/wiki/JSON
http://pt.wikipedia.org/wiki/Serializao
10
11
exclu-los fazendo
chamadas ao mtodo
Entretanto, aA remoo de todas as chaves do objeto Storage, uma a uma, pode ser
uma tarefa entediante e sujeita a erros. Para esses casos, quando quisermos remover todos
os dados, fazemos uma nica chamada ao mtodo clear(), que ir apagar de uma s vez
todos os dados armazenados no objeto Storage.
Exemplo-7: Excluindo todos os dados armazenados em um objeto Storage.
// Remove todos os itens armazenados em Local storage
localStorage.clear();
Esse controle e sincronizao de dados pode ser feito atravs da captura do evento
storage, que disparado automaticamente em todas as instncias que tem acesso aos dados
inseridos, modificados ou apagados10. Esse disparo ocorre, toda vez que algum dos
mtodos: setItem(), removeItem() ou clear() invocado em uma das janelas/abas de
modo que as outras instncias sejam informadas que houve uma modificao na lista de
itens armazenados no Web storage.
Assim, se quisermos manter o controle das mudanas no armazenamento,
precisamos capturar o evento storage atravs de uma funo (callback) que ir trat-lo.
A captura do evento storage feita checando-se primeiro qual o mecanismo de
tratamento de eventos o navegador suporta: addEventListener
window.attachEvent
11
(padro HTML5) ou
10
Na maioria dos navegadores, o disparo do evento Storage s ocorre nas outras janela/abas, no ocorrendo
na janela/aba onde os dados foram modificados. Entretanto, no Internet Explorer, o disparo desse evento
ocorre em todas as janelas/abas, inclusive naquela em que os dados foram modificados.
11
13
Concluso
Alm dos aplicativos web, muitos sites esto se beneficiando do Web storage e
esto comeando a disponibilizar novos servios e adicionando novas funcionalidades s
pginas, abrindo novas oportunidades de negcios.
Dentre as partes fortes do Web storage, destacam-se:
Possui um evento (storage event) que ajuda a manter os dados das janelas/abas
sincronizadas.
O Web storage uma tecnologia recente que ainda est amadurecendo, portanto,
sujeita a novas atualizaes que venham acrescentar-lhe outras funcionalidades (p.ex.
criptografia, armazenamento de tipo diferente de string, recursos para modificao de
cotas, etc.).
15
Alm do Web storage, existem outras tecnologias que podem ser usadas para se
fazer o armazenamento de dados locais: variveis Javascript, window.name, Web SQL,
IndexeDB, HTML5 File API, etc. No artigo de Backler (2013), encontramos um pequeno
resumo sobre alguns deles.
Referncias
BACKLER, Craig. HTML5 Browser storage: the past, present and future. Sitepoint.
09/10/2013. Disp. em: http://www.sitepoint.com/html5-browser-storage-past-presentfuture. Acesso em: 28/10/2013.
CIRIACO, Douglas. O que API? Tecmundo. 24/03/2009. Disp. em:
http://www.tecmundo.com.br/programacao/1807-o-que-e-api-.htm#ixzz2Ol1zcuRU.
Acesso em: 27/08/2013.
GOLDSTEIN, Alexis; LAZARIS, Louis; WEYL, Estelle. HTML5 and CSS3 for the real
world. Sitepoint. 2011.
IHRIG, Colin. An overview of the web storage API. Sitepoint. 2012. Disp. em:
www.sitepoint.com/an-overview-of-the-web-storage-api/. Acesso em: 13/09/2013.
JONES, Adrian. Native, Hybrid or Web apps. Sitepoint. 09/01/2012. Disp. em:
http://www.sitepoint.com/native-hybrid-or-web-apps/. Acesso em: 29/08/2013.
JONES, Zach. Web Storage Security. White Hat Security. 28/03/2013.
Disp. em: https://blog.whitehatsec.com/web-storage-security/. Acesso em: 23/10/2013.
MITRA, Tilo. Developing a web app vs. a native app. 09/05/2013.
Disp. em: http://tilomitra.com/web-vs-native/. Acesso em: 29/08/2013.
NASCIMENTO, Jean. Utilizando a Storage API do HTML5. iMasters. 11/04/2011.
Disp. em: http://imasters.com.br/artigo/20315/desenvolvimento/utilizando-a-storage-apido-html5/. Acesso em: 26/08/2013.
PILGRIM, Mark. Dive into HTML5. 2011. (verso em portugus). Disp. em:
http://diveintohtml5.com.br/storage.html#methods. Acesso em: 26/08/2013.
SRINIVASAN, Rathnakanya K. HTML5 Web Storage. Sitepoint. 08/08/2013.
Disp. em: http://www.sitepoint.com/html5-web-storage/. Acesso em: 26/08/2013.
16
17