web storage - armazenamento de dados

16
Armazenamento de dados com localStorage e sessionStorage

Upload: mario-mendonca

Post on 15-Apr-2017

47 views

Category:

Software


0 download

TRANSCRIPT

Page 1: Web Storage - Armazenamento de dados

Armazenamento de dadoscom localStorage e sessionStorage

Page 2: Web Storage - Armazenamento de dados

Jackson VeronezeSoftware Developer

[email protected]://jacksonveroneze.comhttps://br.linkedin.com/in/jacksonveroneze

Mario MendonçaSoftware Developer

[email protected]://br.linkedin.com/in/mario-mendonca

Autores

Page 3: Web Storage - Armazenamento de dados

Entendendo os Cookies e Sessões

Os cookies são “persistências temporárias” feitas no lado do usuário, e sessões são persistências dependentes de cookies, mas realizadas no lado do servidor.

Page 4: Web Storage - Armazenamento de dados

Cookies

Através de cookies o servidor Web é capaz de trocar informações de estado com o navegador do usuário. Ex.: Carrinho de compras.

Tecnicamente falando, um cookie é uma pequena quantidade de informação persistida temporariamente pelo navegador. Os navegadores normalmente limitam o tamanho dos cookies em até 4KB, e apagam cookies com a data de “validade vencida”.

Page 5: Web Storage - Armazenamento de dados

Exemplo

Page 6: Web Storage - Armazenamento de dados

Sessões

As sessões têm um princípio similar aos cookies, só que o armazenamento do estado é feito pelo servidor Web, e não pelo navegador.

Por exemplo, uma aplicação que necessita de autenticação. Dados “sensíveis”, como usuário e e-mail, são mais interessantes de serem guardadas em sessões. Isto, pois não é seguro que esse tipo de informação fique “viajando” pela Web.

Page 7: Web Storage - Armazenamento de dados

Exemplo

Page 8: Web Storage - Armazenamento de dados

LocalStorage

O localStorage salva dados no computador do visitante, que ficam vinculados ao (e apenas acessíveis pelo) seu domínio. E para usar é bem simples:

Use o método setItem(nome, valor) para criar/salvar novos itens e o depois o método getItem(nome) para recuperar o valor.

Page 9: Web Storage - Armazenamento de dados

LocalStorage

Local storage é persistente; Ele armazena dados sem data de expiração.

Local storage é muito semelhante aos cookies exceto por algumas diferenças importantes, como:

permite muito mais espaço de armazenamento.

é transmitido apenas mediante pedido. Isto significa que podemos armazenar grandes quantidades de dados sem afetar o desempenho do site.

Page 10: Web Storage - Armazenamento de dados

Exemplo

Page 11: Web Storage - Armazenamento de dados

Limites do LocalStorage

Segundo a especificação da W3C, ela sugere(não é obrigatório) que o espaço reservado por origem seja de 5MB e no futuro esse limite pode ser atualizado, a origem citada anteriormente no caso é por cada domínios.

Page 12: Web Storage - Armazenamento de dados

SessionStorage

É um mecanismo que foi projetado com a finalidade de armazenar dados para transação em um documento HTML, isto é, para cada novo documento HTML, é criada uma área de armazenamento de dados independente.

Page 13: Web Storage - Armazenamento de dados

Exemplo

Page 14: Web Storage - Armazenamento de dados

Suporte

Page 15: Web Storage - Armazenamento de dados

Conclusão

Ambos localStorage e sessionStorage se extendem de Storage. Não há diferença entre eles, exceto para a não-persistência de sessionStorage.

Utilize localStorage para uso a longo prazo e sessionStorage quando você precisa armazenar algo temporário(i.e. dados de uma sessão). Ambos também são escopo por fabricantes de navegadores.