HTML5Web StorageSessionStorage & LocalStorage         alexandreporfirio.com   1
Como bom desenvolvedor você procura uma solução para gravar dados do lado do usuário de forma persistente, porém quais ser...
• Implementando:  A primeira coisa a fazer é testar se a versão do seu browser(navegador)  suporta as APIs de armazanament...
Já neste código usamos a LocalStorage:var user_id = "A109";var user_prefs = {keep_me_logged_in: true,start_page: "alexandr...
Vimos como guardar os dados no navegador de forma local.   Vamos agora resgatar tudo que foi salvo:var user_id = "A109";va...
Qual das duas devo usar?A SessionStorage por ter um tempo de vida curto é muito utilizadapara guardar dados de login do us...
Algumas APIs usadas para sessionStorage e                 localStorage:• getItem(key) - Retorna um item de dados a partir ...
Armazenamento A maioria dos navegadores oferecem limite de 5 MB para armazenamentolocal. Porém prováveis erros poderão sur...
Controlando armazenamentoUma solução para este problema seria a implementação de um mecanismode expiração automático, atra...
Exemplo de controle: seu site de comércio eletrônico pode     manter um registro de um usuário que expira em 21 dias:var c...
*Maiores informações sobre WebStorage acesse:      https://developer.mozilla.org/en/dom/storage                           ...
Upcoming SlideShare
Loading in …5
×

HTML5 - Web storage

1,182 views

Published on

O HTML5 acrescentou ou até mesmo ampliou esta posibilidade com duas novas APIs para navegadores possibilitando o armazenamento de dados de forma persistente.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,182
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5 - Web storage

  1. 1. HTML5Web StorageSessionStorage & LocalStorage alexandreporfirio.com 1
  2. 2. Como bom desenvolvedor você procura uma solução para gravar dados do lado do usuário de forma persistente, porém quais seriam as suas alternativas; cookies ou sessions? O HTML5 acrescentou ou até mesmo ampliou esta posibilidade com duas novas APIs para navegadores possibilitando o armazenamento de dados de forma persistente:- SessionStorage - Como o próprio nome já diz "Session Storage", armazenamento de dados por curto período de tempo.- LocalStorage - Armazenamento de dados de forma persistente, ou seja, os dados ficarão salvos até serem apagados intencionalmente. A grande diferença entre as duas APIs consiste no tempo de armazenamento dos dados que o navegador vai utilizar localmente. alexandreporfirio.com 2
  3. 3. • Implementando: A primeira coisa a fazer é testar se a versão do seu browser(navegador) suporta as APIs de armazanamento local. Ex.: var storage_support = window.sessionStorage || window.localStorage; O código abaixo é um simples exemplo do uso da SessionStorage: var user_id = "A109"; var user_data = { name: "Alexandre", occupation: "Desenvolvedor", favorite_color: "Azul" }; alexandreporfirio.com 3
  4. 4. Já neste código usamos a LocalStorage:var user_id = "A109";var user_prefs = {keep_me_logged_in: true,start_page: "alexandreporfirio.com"};localStorage.setItem(user_id, JSON.stringify(user_prefs));*Observe que as implementações são muito semelhantes. alexandreporfirio.com 4
  5. 5. Vimos como guardar os dados no navegador de forma local. Vamos agora resgatar tudo que foi salvo:var user_id = "A109";var user_data = { };var user_prefs = { };if (sessionStorage.getItem(user_id)) {user_data = JSON.parse(sessionStorage.getItem(user_id));}if (localStorage.getItem(user_id)) {user_prefs = JSON.parse(localStorage.getItem(user_id));} alexandreporfirio.com 5
  6. 6. Qual das duas devo usar?A SessionStorage por ter um tempo de vida curto é muito utilizadapara guardar dados de login do usuário, carrinho de compras, etc..A LocalStorage parece ser a melhor opção por oferecer vida longa aosdados armazenados permitindo uma infinidades de possibilidades. alexandreporfirio.com 6
  7. 7. Algumas APIs usadas para sessionStorage e localStorage:• getItem(key) - Retorna um item de dados a partir do recipiente de armazenamento, referenciada pela sua chave(key)• setItem(key, item) - Adiciona um item de dados para o recipiente de armazenamento, referenciado por sua chave.• key(index) - Retorna a chave para um item de dados no índice especificado.• removeItem(key) - Remove o item do recipiente de armazenamento, indexado por sua chave.• clear() - Apaga todos os dados do recipiente.• Length - Identifica o número de itens guardados no recipiente. alexandreporfirio.com 7
  8. 8. Armazenamento A maioria dos navegadores oferecem limite de 5 MB para armazenamentolocal. Porém prováveis erros poderão surgir quando a capacidade dearmazenamento ultrapassar este limite. Embora 5 MB pareça ser muitopara armazenamento local, este limite é facilmente atingido bem maisrápido do que se imagina, isto geralmente ocorre pela falta de tratamentoadequado a dados antigos e esquecidos armazenados no navegador. alexandreporfirio.com 8
  9. 9. Controlando armazenamentoUma solução para este problema seria a implementação de um mecanismode expiração automático, através de um comando tipo "timestamp" queverifica a cada carregamento de página se algum dado expirou dentro deespaço de tempo estipulado. alexandreporfirio.com 9
  10. 10. Exemplo de controle: seu site de comércio eletrônico pode manter um registro de um usuário que expira em 21 dias:var current_item = {id: "A109",data: "H Sapatos",ts: new Date() // timestamp da data atual, usada para comparar com datas};localStorage.setItem(current_item.id, JSON.stringify(current_item));var key, data;for (var i=0; i<localStorage.length; i++) {key = localStorage.key(i);data = localStorage.getItem(key);if (data.ts < ((new Date()) - 60*60*24*21)) { // verifica se tem mais de 21 dias para remoçãolocalStorage.removeItem(key);}} alexandreporfirio.com 10
  11. 11. *Maiores informações sobre WebStorage acesse: https://developer.mozilla.org/en/dom/storage Por Alexandre Porfírio alexandreporfirio.com 11

×