Web Storage - Armazenamento de dados
-
Upload
mario-mendonca -
Category
Software
-
view
49 -
download
0
Transcript of Web Storage - Armazenamento de dados
![Page 1: Web Storage - Armazenamento de dados](https://reader036.fdocuments.net/reader036/viewer/2022062412/5876befb1a28ab6d5a8b46ff/html5/thumbnails/1.jpg)
Armazenamento de dadoscom localStorage e sessionStorage
![Page 2: Web Storage - Armazenamento de dados](https://reader036.fdocuments.net/reader036/viewer/2022062412/5876befb1a28ab6d5a8b46ff/html5/thumbnails/2.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062412/5876befb1a28ab6d5a8b46ff/html5/thumbnails/3.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062412/5876befb1a28ab6d5a8b46ff/html5/thumbnails/4.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062412/5876befb1a28ab6d5a8b46ff/html5/thumbnails/5.jpg)
Exemplo
![Page 6: Web Storage - Armazenamento de dados](https://reader036.fdocuments.net/reader036/viewer/2022062412/5876befb1a28ab6d5a8b46ff/html5/thumbnails/6.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062412/5876befb1a28ab6d5a8b46ff/html5/thumbnails/7.jpg)
Exemplo
![Page 8: Web Storage - Armazenamento de dados](https://reader036.fdocuments.net/reader036/viewer/2022062412/5876befb1a28ab6d5a8b46ff/html5/thumbnails/8.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062412/5876befb1a28ab6d5a8b46ff/html5/thumbnails/9.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062412/5876befb1a28ab6d5a8b46ff/html5/thumbnails/10.jpg)
Exemplo
![Page 11: Web Storage - Armazenamento de dados](https://reader036.fdocuments.net/reader036/viewer/2022062412/5876befb1a28ab6d5a8b46ff/html5/thumbnails/11.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062412/5876befb1a28ab6d5a8b46ff/html5/thumbnails/12.jpg)
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](https://reader036.fdocuments.net/reader036/viewer/2022062412/5876befb1a28ab6d5a8b46ff/html5/thumbnails/13.jpg)
Exemplo
![Page 14: Web Storage - Armazenamento de dados](https://reader036.fdocuments.net/reader036/viewer/2022062412/5876befb1a28ab6d5a8b46ff/html5/thumbnails/14.jpg)
Suporte
![Page 15: Web Storage - Armazenamento de dados](https://reader036.fdocuments.net/reader036/viewer/2022062412/5876befb1a28ab6d5a8b46ff/html5/thumbnails/15.jpg)
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.
![Page 16: Web Storage - Armazenamento de dados](https://reader036.fdocuments.net/reader036/viewer/2022062412/5876befb1a28ab6d5a8b46ff/html5/thumbnails/16.jpg)
Referências
http://klauslaube.com.br/2012/04/05/entendendo-os-cookies-e-sessoes.html
http://blog.thiagobelem.net/armazenando-informacoes-no-computador-do-visitante-com-localstorage-e-sessionstorage
http://pt.stackoverflow.com/questions/19384/diferen%C3%A7as-entre-localstorage-vs-sessionstorage