SlideShare uma empresa Scribd logo
HTML5
Web Storage
SessionStorage & 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 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
• 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
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
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
Qual das duas devo usar?
A SessionStorage por ter um tempo de vida curto é muito utilizada
para guardar dados de login do usuário, carrinho de compras, etc..

A LocalStorage parece ser a melhor opção por oferecer vida longa aos
dados armazenados permitindo uma infinidades de possibilidades.




                             alexandreporfirio.com                     6
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
Armazenamento
 A maioria dos navegadores oferecem limite de 5 MB para armazenamento
local.
 Porém prováveis erros poderão surgir quando a capacidade de
armazenamento ultrapassar este limite. Embora 5 MB pareça ser muito
para armazenamento local, este limite é facilmente atingido bem mais
rápido do que se imagina, isto geralmente ocorre pela falta de tratamento
adequado a dados antigos e esquecidos armazenados no navegador.




                              alexandreporfirio.com                         8
Controlando armazenamento

Uma solução para este problema seria a implementação de um mecanismo
de expiração automático, através de um comando tipo "timestamp" que
verifica a cada carregamento de página se algum dado expirou dentro de
espaço de tempo estipulado.




                            alexandreporfirio.com                        9
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ção
localStorage.removeItem(key);
}
}                                  alexandreporfirio.com                         10
*Maiores informações sobre WebStorage acesse:
      https://developer.mozilla.org/en/dom/storage




                                              Por Alexandre Porfírio




                      alexandreporfirio.com                            11

Mais conteúdo relacionado

Mais procurados

Mini Curso PHP Twig - PHP Conference 2017
Mini Curso PHP Twig - PHP Conference 2017 Mini Curso PHP Twig - PHP Conference 2017
Mini Curso PHP Twig - PHP Conference 2017
Luis Gustavo Almeida
 
#1 Introdução ao MongoDB
#1   Introdução ao MongoDB#1   Introdução ao MongoDB
#1 Introdução ao MongoDB
Gabriel Alves Scavassa
 
Minicurso Epoca mongoDB
Minicurso Epoca mongoDBMinicurso Epoca mongoDB
Minicurso Epoca mongoDB
LelyBarros
 
#3 Instalação MongoDB
#3   Instalação MongoDB  #3   Instalação MongoDB
#3 Instalação MongoDB
Gabriel Alves Scavassa
 
Aula 11 - Controle de sessão em PHP - Programação Web
Aula 11  - Controle de sessão em PHP - Programação WebAula 11  - Controle de sessão em PHP - Programação Web
Aula 11 - Controle de sessão em PHP - Programação Web
Dalton Martins
 
Autenticacao em APIs com SSL
Autenticacao em APIs com SSLAutenticacao em APIs com SSL
Autenticacao em APIs com SSL
Marcelo Milhomem
 
Curso mongo db com php
Curso mongo db com phpCurso mongo db com php
Curso mongo db com php
Suissa
 
Mini-Curso de MongoDB
Mini-Curso de MongoDBMini-Curso de MongoDB
Mini-Curso de MongoDB
Brunno Gomes
 
Mongodb workshop cinlug
Mongodb workshop cinlugMongodb workshop cinlug
Mongodb workshop cinlug
Daker Fernandes
 
Como o elasticsearch salvou minhas buscas
Como o elasticsearch salvou minhas buscasComo o elasticsearch salvou minhas buscas
Como o elasticsearch salvou minhas buscas
Waldemar Neto
 
Mongo + php
Mongo + phpMongo + php
Goocloud Backup Storage
Goocloud   Backup  StorageGoocloud   Backup  Storage
Goocloud Backup Storage
goocloud
 
Aula 5 php
Aula 5 phpAula 5 php
Aula 5 php
sergio_henrique
 
Crawling - Coleta de dados na Web com PHP
Crawling - Coleta de dados na Web com PHP Crawling - Coleta de dados na Web com PHP
Crawling - Coleta de dados na Web com PHP
Luis Gustavo Almeida
 
#5 CRUD no MongoDB
#5   CRUD  no MongoDB#5   CRUD  no MongoDB
#5 CRUD no MongoDB
Gabriel Alves Scavassa
 
Modelando aplicação em documento - MongoDB
Modelando aplicação em documento - MongoDBModelando aplicação em documento - MongoDB
Modelando aplicação em documento - MongoDB
Thiago Avelino
 
Talk at QConSP
Talk at QConSPTalk at QConSP
Talk at QConSP
Victor Pantoja
 
MongoDB - Apresentação
MongoDB - ApresentaçãoMongoDB - Apresentação
MongoDB - Apresentação
Terra / Neo
 
Aula 09 - Instruções preparadas e otimização de consultas do Mysql - Program...
Aula 09  - Instruções preparadas e otimização de consultas do Mysql - Program...Aula 09  - Instruções preparadas e otimização de consultas do Mysql - Program...
Aula 09 - Instruções preparadas e otimização de consultas do Mysql - Program...
Dalton Martins
 
Aumente a performance de seu site de maneira disciplinada
Aumente a performance de seu site de maneira disciplinadaAumente a performance de seu site de maneira disciplinada
Aumente a performance de seu site de maneira disciplinada
Henrique Lima
 

Mais procurados (20)

Mini Curso PHP Twig - PHP Conference 2017
Mini Curso PHP Twig - PHP Conference 2017 Mini Curso PHP Twig - PHP Conference 2017
Mini Curso PHP Twig - PHP Conference 2017
 
#1 Introdução ao MongoDB
#1   Introdução ao MongoDB#1   Introdução ao MongoDB
#1 Introdução ao MongoDB
 
Minicurso Epoca mongoDB
Minicurso Epoca mongoDBMinicurso Epoca mongoDB
Minicurso Epoca mongoDB
 
#3 Instalação MongoDB
#3   Instalação MongoDB  #3   Instalação MongoDB
#3 Instalação MongoDB
 
Aula 11 - Controle de sessão em PHP - Programação Web
Aula 11  - Controle de sessão em PHP - Programação WebAula 11  - Controle de sessão em PHP - Programação Web
Aula 11 - Controle de sessão em PHP - Programação Web
 
Autenticacao em APIs com SSL
Autenticacao em APIs com SSLAutenticacao em APIs com SSL
Autenticacao em APIs com SSL
 
Curso mongo db com php
Curso mongo db com phpCurso mongo db com php
Curso mongo db com php
 
Mini-Curso de MongoDB
Mini-Curso de MongoDBMini-Curso de MongoDB
Mini-Curso de MongoDB
 
Mongodb workshop cinlug
Mongodb workshop cinlugMongodb workshop cinlug
Mongodb workshop cinlug
 
Como o elasticsearch salvou minhas buscas
Como o elasticsearch salvou minhas buscasComo o elasticsearch salvou minhas buscas
Como o elasticsearch salvou minhas buscas
 
Mongo + php
Mongo + phpMongo + php
Mongo + php
 
Goocloud Backup Storage
Goocloud   Backup  StorageGoocloud   Backup  Storage
Goocloud Backup Storage
 
Aula 5 php
Aula 5 phpAula 5 php
Aula 5 php
 
Crawling - Coleta de dados na Web com PHP
Crawling - Coleta de dados na Web com PHP Crawling - Coleta de dados na Web com PHP
Crawling - Coleta de dados na Web com PHP
 
#5 CRUD no MongoDB
#5   CRUD  no MongoDB#5   CRUD  no MongoDB
#5 CRUD no MongoDB
 
Modelando aplicação em documento - MongoDB
Modelando aplicação em documento - MongoDBModelando aplicação em documento - MongoDB
Modelando aplicação em documento - MongoDB
 
Talk at QConSP
Talk at QConSPTalk at QConSP
Talk at QConSP
 
MongoDB - Apresentação
MongoDB - ApresentaçãoMongoDB - Apresentação
MongoDB - Apresentação
 
Aula 09 - Instruções preparadas e otimização de consultas do Mysql - Program...
Aula 09  - Instruções preparadas e otimização de consultas do Mysql - Program...Aula 09  - Instruções preparadas e otimização de consultas do Mysql - Program...
Aula 09 - Instruções preparadas e otimização de consultas do Mysql - Program...
 
Aumente a performance de seu site de maneira disciplinada
Aumente a performance de seu site de maneira disciplinadaAumente a performance de seu site de maneira disciplinada
Aumente a performance de seu site de maneira disciplinada
 

Semelhante a HTML5 - Web storage

Html5 pt - Offline Apps
Html5 pt - Offline AppsHtml5 pt - Offline Apps
Html5 pt - Offline Apps
Byclosure
 
Desenvolvimento de Apps e Games para Android - Parte 5
Desenvolvimento de Apps e Games para Android - Parte 5Desenvolvimento de Apps e Games para Android - Parte 5
Desenvolvimento de Apps e Games para Android - Parte 5
Erisvaldo Junior
 
Design Patterns para Tuning Pentaho com Ctools
Design Patterns para Tuning Pentaho com CtoolsDesign Patterns para Tuning Pentaho com Ctools
Design Patterns para Tuning Pentaho com Ctools
e-Setorial
 
Web Storage - Armazenamento de dados
Web Storage - Armazenamento de dadosWeb Storage - Armazenamento de dados
Web Storage - Armazenamento de dados
Mario Mendonça
 
Banco de Dados - Android
Banco de Dados - AndroidBanco de Dados - Android
Performance em Java
Performance em JavaPerformance em Java
Performance em Java
Claudio Miranda
 
TDC2016POA | Trilha Banco de Dados - Firebase e Realm, o NoSQL ganha força no...
TDC2016POA | Trilha Banco de Dados - Firebase e Realm, o NoSQL ganha força no...TDC2016POA | Trilha Banco de Dados - Firebase e Realm, o NoSQL ganha força no...
TDC2016POA | Trilha Banco de Dados - Firebase e Realm, o NoSQL ganha força no...
tdc-globalcode
 
Java e Cloud Computing
Java e Cloud ComputingJava e Cloud Computing
Java e Cloud Computing
Mario Jorge Pereira
 
PHP FrameWARks - FISL
PHP FrameWARks - FISLPHP FrameWARks - FISL
PHP FrameWARks - FISL
Marcio Albuquerque
 
Mobileconf dicas-android
Mobileconf dicas-androidMobileconf dicas-android
Mobileconf dicas-android
Alberto Souza
 
Xen e CoreOS: solução para data mining com NodeJS e ElasticSearch
Xen e CoreOS: solução para data mining com NodeJS e ElasticSearchXen e CoreOS: solução para data mining com NodeJS e ElasticSearch
Xen e CoreOS: solução para data mining com NodeJS e ElasticSearch
Bernardo Donadio
 
De 1 a 1.000.00 de usuários
De 1 a 1.000.00 de usuáriosDe 1 a 1.000.00 de usuários
De 1 a 1.000.00 de usuários
Felipe Klerk Signorini
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Alexandre Tarifa
 
Aumente a performance de seu site
Aumente a performance de seu siteAumente a performance de seu site
Aumente a performance de seu site
Henrique Lima
 
Aumente a performance de seu site de maneira disciplinada
Aumente a performance de seu site de maneira disciplinadaAumente a performance de seu site de maneira disciplinada
Aumente a performance de seu site de maneira disciplinada
Henrique Lima
 
Aula05 android persistencia
Aula05 android persistenciaAula05 android persistencia
Aula05 android persistencia
Roberson Alves
 
Implementação de PCs, parte 2 de 4: Migração dos dados e configurações dos us...
Implementação de PCs, parte 2 de 4: Migração dos dados e configurações dos us...Implementação de PCs, parte 2 de 4: Migração dos dados e configurações dos us...
Implementação de PCs, parte 2 de 4: Migração dos dados e configurações dos us...
Marcelo Matias
 
Dsi 015 - poo e php - conexão com bancos de dados usando pdo
Dsi   015 - poo e php - conexão com bancos de dados usando pdoDsi   015 - poo e php - conexão com bancos de dados usando pdo
Dsi 015 - poo e php - conexão com bancos de dados usando pdo
Jorge Luís Gregório
 
Jj08 otimizacao
Jj08 otimizacaoJj08 otimizacao
Jj08 otimizacao
Helder da Rocha
 
Vamos conversar sobre cache
Vamos conversar sobre cacheVamos conversar sobre cache
Vamos conversar sobre cache
Felipe Klerk Signorini
 

Semelhante a HTML5 - Web storage (20)

Html5 pt - Offline Apps
Html5 pt - Offline AppsHtml5 pt - Offline Apps
Html5 pt - Offline Apps
 
Desenvolvimento de Apps e Games para Android - Parte 5
Desenvolvimento de Apps e Games para Android - Parte 5Desenvolvimento de Apps e Games para Android - Parte 5
Desenvolvimento de Apps e Games para Android - Parte 5
 
Design Patterns para Tuning Pentaho com Ctools
Design Patterns para Tuning Pentaho com CtoolsDesign Patterns para Tuning Pentaho com Ctools
Design Patterns para Tuning Pentaho com Ctools
 
Web Storage - Armazenamento de dados
Web Storage - Armazenamento de dadosWeb Storage - Armazenamento de dados
Web Storage - Armazenamento de dados
 
Banco de Dados - Android
Banco de Dados - AndroidBanco de Dados - Android
Banco de Dados - Android
 
Performance em Java
Performance em JavaPerformance em Java
Performance em Java
 
TDC2016POA | Trilha Banco de Dados - Firebase e Realm, o NoSQL ganha força no...
TDC2016POA | Trilha Banco de Dados - Firebase e Realm, o NoSQL ganha força no...TDC2016POA | Trilha Banco de Dados - Firebase e Realm, o NoSQL ganha força no...
TDC2016POA | Trilha Banco de Dados - Firebase e Realm, o NoSQL ganha força no...
 
Java e Cloud Computing
Java e Cloud ComputingJava e Cloud Computing
Java e Cloud Computing
 
PHP FrameWARks - FISL
PHP FrameWARks - FISLPHP FrameWARks - FISL
PHP FrameWARks - FISL
 
Mobileconf dicas-android
Mobileconf dicas-androidMobileconf dicas-android
Mobileconf dicas-android
 
Xen e CoreOS: solução para data mining com NodeJS e ElasticSearch
Xen e CoreOS: solução para data mining com NodeJS e ElasticSearchXen e CoreOS: solução para data mining com NodeJS e ElasticSearch
Xen e CoreOS: solução para data mining com NodeJS e ElasticSearch
 
De 1 a 1.000.00 de usuários
De 1 a 1.000.00 de usuáriosDe 1 a 1.000.00 de usuários
De 1 a 1.000.00 de usuários
 
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escalaTécnicas e recursos para desenvolvimento Web em cenários de grande escala
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
 
Aumente a performance de seu site
Aumente a performance de seu siteAumente a performance de seu site
Aumente a performance de seu site
 
Aumente a performance de seu site de maneira disciplinada
Aumente a performance de seu site de maneira disciplinadaAumente a performance de seu site de maneira disciplinada
Aumente a performance de seu site de maneira disciplinada
 
Aula05 android persistencia
Aula05 android persistenciaAula05 android persistencia
Aula05 android persistencia
 
Implementação de PCs, parte 2 de 4: Migração dos dados e configurações dos us...
Implementação de PCs, parte 2 de 4: Migração dos dados e configurações dos us...Implementação de PCs, parte 2 de 4: Migração dos dados e configurações dos us...
Implementação de PCs, parte 2 de 4: Migração dos dados e configurações dos us...
 
Dsi 015 - poo e php - conexão com bancos de dados usando pdo
Dsi   015 - poo e php - conexão com bancos de dados usando pdoDsi   015 - poo e php - conexão com bancos de dados usando pdo
Dsi 015 - poo e php - conexão com bancos de dados usando pdo
 
Jj08 otimizacao
Jj08 otimizacaoJj08 otimizacao
Jj08 otimizacao
 
Vamos conversar sobre cache
Vamos conversar sobre cacheVamos conversar sobre cache
Vamos conversar sobre cache
 

HTML5 - Web storage

  • 1. HTML5 Web Storage SessionStorage & LocalStorage alexandreporfirio.com 1
  • 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. • 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. 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. 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. Qual das duas devo usar? A SessionStorage por ter um tempo de vida curto é muito utilizada para guardar dados de login do usuário, carrinho de compras, etc.. A LocalStorage parece ser a melhor opção por oferecer vida longa aos dados armazenados permitindo uma infinidades de possibilidades. alexandreporfirio.com 6
  • 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. Armazenamento A maioria dos navegadores oferecem limite de 5 MB para armazenamento local. Porém prováveis erros poderão surgir quando a capacidade de armazenamento ultrapassar este limite. Embora 5 MB pareça ser muito para armazenamento local, este limite é facilmente atingido bem mais rápido do que se imagina, isto geralmente ocorre pela falta de tratamento adequado a dados antigos e esquecidos armazenados no navegador. alexandreporfirio.com 8
  • 9. Controlando armazenamento Uma solução para este problema seria a implementação de um mecanismo de expiração automático, através de um comando tipo "timestamp" que verifica a cada carregamento de página se algum dado expirou dentro de espaço de tempo estipulado. alexandreporfirio.com 9
  • 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ção localStorage.removeItem(key); } } alexandreporfirio.com 10
  • 11. *Maiores informações sobre WebStorage acesse: https://developer.mozilla.org/en/dom/storage Por Alexandre Porfírio alexandreporfirio.com 11