Blog SW9

Desenvolvimento Web e Híbrido na prática.
Tome um café, concentre-se, codifique. (งツ)ว

Client Side Storage | Aula 4 – Web Storage API – LocalStorage | Série HTML5 | SW9

Client Side Storage – Aula 4 | Web Storage API – LocalStorage | Série HTML5 | SW9

Olá a todos. Sejam bem-vindos ao Canal e Blog SW9 (http://blog.sw9.com.br)

Dando continuidade a MEGA Série sobre HTML5.  O Objetivo é apresentar os recursos e as possibilidades que surgiram com o advento do HTML5.

Neste novo conjunto de Aulas abordaremos tudo o que você precisa saber sobre armazenamento de dados do lado cliente (Client Side Storage). E o melhor: veremos tudo isso na prática.

O que veremos nesta aula?

Após passarmos pela introdução e as duas aulas de preparação, agora chegou o momento de falarmos sobre a primeira tecnologia para armazenamento de dados do lado do cliente (Client Side Storage).  Nesta quarta AULA falaremos da API Web Storage, mais especificamente do objeto localStorage.

Em primeiro lugar, vamos usar a camada de abstração criada na aula passada para implementarmos as operações de salvar, limpar, inicializar e pesquisar dados de acordo com a especificação do objeto localStorage.

Na sequencia, veremos o comportamento dos dados armazenados quando abrimos uma nova aba no navegador e tentamos acessar os dados de contatos armazenados.

Finalmente veremos como se comporta o objeto com relação a segurança. Faremos um teste tentando acessar os dados armazenados a partir de um outro domínio.

O que mais você deveria saber sobre localStorage?

Existem algumas características do objeto localStorage que vamos explicar ao longo da AULA de hoje:

1- O Objeto localStorage permite armazenar uma quantidade razoável de dados, mais do que cookies por exemplo.

2- A forma de armazenamento se baseia no modelo chave:valor, fazendo com que o localStorage armazene dados nos mesmos moldes do NoSQL por exemplo.

3- Os dados armazenados nesta estrutura devem ser do tipo string ou transformados para este tipo. Com base nesta regra, você pode criar seus dados no formato array, inteiro, etc, mas no momento de salvá-los, você deve converter para string, usando por exemplo JSON.stringify. Ao recuperar os dados armazenados, você pode usar JSON.parse para convertê-los para a estrutura nativa.

Exemplo:

a. Recuperando dados do localStorage:

var contacts = JSON.parse(localStorage.getItem('contacts'));

b. Gravando dados no localStorage:

localStorage.setItem('contacts', JSON.stringify(contacts));

4- Você pode manipular os dados de duas formas distintas:

4.1 Usando o método setItem para gravar dados e o método getItem para recuperar dados armazenados;

4.2 Usando localStorage.nomeDaChave = conteudoQueSeraSalvo  para gravar dados e var dadoRecuperado = localStorage.nomeDaChave para recuperar dados armazenados.

5- Os dados armazenados permanecem no navegador do cliente, mesmo que o usuário feche o navegador, fecha a aba e abra uma nova.  Os dados serão removidos, ou por uma configuração/comportamento específico de cada navegador, ou removendo manualmente a estrutura de dados a partir da ferramenta do desenvolvedor (esta forma eu explico no vídeo), ou limpando os dados a partir da própria aplicação web, usando localStorage.clear() ou localStorage.removeItem().

Bom pessoal, agora chegou o momento de partirmos para a conclusão e nossa área de LINKS, e na sequencia assistam a AULA de hoje :-)

Aprenda HTML 5 e CSS 3

Comece a criar Sites Com o Melhor do HTML 5 e CSS 3
Curso Relacionado

[Conclusão]

Na aula de hoje [Client Side Storage – Aula 4 | Web Storage API – LocalStorage | Série HTML5], demos sequência na Mega série sobre HTML 5.

Hoje apresentei a primeiro opção de armazenamento de dados do lado cliente. Falamos da API Web Storage, mais especificamente do localstorage (um dos objetos que fazem parte da API Web Storage), e implementamos as operações de salvar, pesquisar, inicializar e limpar dados usando esta tecnologia.  Durante a implementação você aprendeu a manipular os dados usando localstorage , verificar o comportamento do localstorage quando mudamos de aba de navegador, e o comportamento quando tentamos acessar os dados a partir de outro domínio. Na próxima AULA falaremos do objeto sessionstorage.

Está disponível na minha área de downloads o projeto parcial.  Para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso.

Dentro da minha área de Downloads, procure pela pasta HTML5/STORAGE.  O resto é com vocês :-)

Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.

Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.

Fiquem com Deus e até o próximo vídeo.

[Links úteis]

Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph

Cloud 9: https://c9.io/login

PlayList Cloud 9: https://goo.gl/7aQbD6

PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8

Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/

Meu Blog: http://blog.sw9.com.br

Meu GitHub: https://sw9brl.github.io/MyGitHubPage

Canal youtube: https://youtube.com/+sw9brl

Link do vídeo: https://youtu.be/P45-VLQj0EM

Parceria: https://www.tubebuddy.com/pricing?a=sw9brl

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se

Tópicos Relacionados

Deixe um comentário

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Paulo Eduardo
Geek desde criança, sempre me interessei por games, filmes e tecnologia. Sou graduado em engenharia da computação pela PUC Campinas. Possuo mais de 15 anos de experiência em desenvolvimento, com foco maior em desenvolvimento web, gestão de times e mais recentemente desenvolvimento mobile utilizando HTML e Javascript.

Termos como #backend, #frontend e #fullstack fazem parte do meu dia a dia.

Não deixe de acompanhar meu blog, canal youtube e meus produtos digitais.

Divirta-se e bons estudos. :-)
Paulo Eduardo on sabyoutubePaulo Eduardo on sabinstagramPaulo Eduardo on sabgithubPaulo Eduardo on sabfacebook
✌(◕‿-)✌ Tempo Limitado - Tenha acesso a nossa área de DownloadsClique Aqui - É Grátis
How to whitelist website on AdBlocker?