este é um novo capítulo 413
Web Storage
9
armazenando coisas localmente
Cansado de empurrar os dados de seu cliente
para dentro de um pequeno armário
cookie? Isso foi
divertido nos anos 1990, mas temos necessidades muito maiores hoje
em dia com os aplicativos web. E se disséssemos que poderíamos
conseguir cinco megabytes para você no navegador do usuário?
Provavelmente, olharia para nós como se estivéssemos tentando
vender uma ponte para você no Brooklyn. Bem, não precisa ser cético
— a API Web Storage HTML5 faz exatamente isso! Neste capítulo,
vamos mostrar tudo que você precisa para armazenar qualquer objeto
localmente, no dispositivo de seu usuário, e se aproveitar disso na
experiência web.
Estou farta deste armário pequeno
e de ter de vestir sempre esse
mesmo tailleur. Com o HTML5, tenho
armazenamento local suficiente para
vestir uma nova roupa a cada dia!
PFCG_HeadFirstHTML5Prog.indb 413 05/06/2014 16:20:40
história do armazenamento em navegadores
414
Capítulo 9
Como funciona o armazenamento do
navegador (1995 — 2010)
Construindo um carrinho de compras? Precisa armazenar algumas
preferências de usuário para seu site? Ou apenas precisa estocar um
pouco de dados que devem ser associados com cada usuário? É aí que o
armazenamento do navegador aparece. O armazenamento do navegador
oferece uma maneira de armazenar persistentemente dados que poderemos
usar na construção de uma experiência web.
Até agora só havia um jeito disponível — o cookie do navegador — para
armazenar informação no navegador. Vejamos como os cookies funcionam:
Cookie: pet=dog; age=5; color=black
Aqui estão alguns pares de valor e chave. Temos
uma chave de “pet” com um valor de “dog”, e uma
chave de “age” com um “5”, e assim por diante...
O navegador salva o cookie
localmente e o enviará de volta
ao servidor da próxima vez
que fizer uma solicitação.
O cookie.
Servidor Web
Enquanto estou servindo uma página
para você, também vou lhe dar alguns
pares de valor/chave para armazenar
para mim. Da próxima vez que entrar
em contato comigo, mande-os para
mim, junto com sua solicitação.
1
Quando seu navegador resgata uma página, digamos de “pets-R-us.
com”, o servidor pode enviar um cookie junto com sua resposta. Os
cookies contêm um ou mais pares de valor e chave:
Navegador
Nos
Bastidores
Navegador
<html>
<head>
<title>Head
First Lounge
Elixirs</title>
</head>
<body>
<h1>Our
Elixirs</h1>
...
</html>
PFCG_HeadFirstHTML5Prog.indb 414 05/06/2014 16:20:41
armazenando coisas localmente
você está aqui
415
Navegador
Servidor Web
Os cookies são enviados e
trazidos de volta a cada
solicitação e resposta HTTP.
Os cookies são associados a
um domínio, como “pets-R-us.
com” e só são enviados àquele
domínio. Portanto, não há
como o “PetsEmporium.com”
pôr suas mãos nesse cookie.
Os cookies podem
ser usados para
todos os tipos de
propostas, como
personalizar a
experiência do
usuário, armazenar
dados, digamos
num carrinho de
compras, ou manter
a situação do jogo.
Os cookies são limitados
a 4K de dados.
2
Da próxima vez que o navegador fizer uma solicitação para “pets-R-us.com”,
ele mandará quaisquer cookies que já tenham sido mandados previamente:
3
O servidor pode, então, usar o cookie para personalizar a experiência,
neste caso, promovendo os itens relevantes ao usuário, mas há muitas
outras maneiras dos cookies serem usados também.
Servidor Web
Você me deu este cookie
da última vez. Estou
devolvendo.
Por que obrigado? Só queria que
soubesse que estamos com uma
grande promoção de produtos
para cães de meia-idade que
ficam bem com preto.
Navegador
<html>
<head>
<title>Head
First Lounge
Elixirs</title>
</head>
<body>
<h1>Our
Elixirs</h1>
...
</html>
Navegador
<html>
<head>
<title>Head
First Lounge
Elixirs</title>
</head>
<body>
<h1>Our
Elixirs</h1>
...
</html>
PFCG_HeadFirstHTML5Prog.indb 415 05/06/2014 16:20:42
Get Use A Cabeça! Programação Em HTML5 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
