Armazenamento local no navegador: Local Storage

Armazenamento local no navegador: Local Storage

CURIOSIDADE

Pessoal tudo bom, para quem tem conhecimento em HTML, CSS e JavaScript voces sabiam que é possível utilizar armazenamento local no próprio navegador?
Pois é, existe uma API do HTML5 acessível através do JavaScript que possibilita isso.

O HTML Web Storage prover dois objetos para armazenamento do lado do cliente:

  • Window.localStorage – Salva os dados sem data de expiração
  • Window.sessionStorage – Salva os dados para uma sessão (os dados são apagados quando o navegador é fechado)

 

Objeto Local Storage

Para verificar se o navegador tem suporte ao recurso faça o código abaixo:

if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

O objeto possui apenas tres métodos:

  • .setItem(“chave”, “valor”) – Salva uma string que pode ser acessada pela chave identificada no primeiro parâmetro.
  • .getItem(“chave”) – Recupera o valor da chave solicitada.
  • .removeItem(“chave”) – Remove a chave e o que foi salvo nela.

Exemplo de uso

localSotrage.setItem("nome", "Lucas Firmino");
alert(localStorage.getItem("nome"))

 

Objeto Session Storage

Possui os mesmo métodos do anterior, a única diferença é que neste caso ele armazena os dados apenas durante uma sessão. Isso significa que ao fechar a aba ou o navegador os dados serão excluídos.

No exemplo abaixo você pode fazer o teste no seu navegador e ver como funciona na prática:

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Você clicou no botão " +
localStorage.clickcount + " vez(es).";
Observação
O Local Storage permite o armazenamento apenas de texto, para que você possa trabalhar com objeto JavaScript é preciso fazer uma conversão do objeto antes de salva-ló, veja exemplo abaixo:
var json = JSON.stringify(valor);

// "Seta" este json no localStorage
window.localStorage.setItem(chave, json);

Para recuperar a informação e trabalhar novamente com o objeto JavaScript, basta fazer o seguinte:

 var json = window.localStorage.getItem(chave);

// Converte este json para objeto
var valor = JSON.parse(json);

 

E o Thunkable?

O mais legal disso para quem também utiliza a plataforma do Thunkable é que o componente WebView (navegador embutido no aplicativo) desde 29 de Janeiro de 2018 possui suporte a este recurso.

Então fica a dica, se você precisa ou até mesmo por preferencia, quiser utilizar apenas HTML e JavaScript para desenvolver algum recurso na sua aplicação ou quiser usar desenvolver toda a aplicação com esta tecnologia já sabe que é possivel armazenar dados diretamente no navegador sem precisar de usar algo online (se for o caso) ou de tentar algum “ajeito técnico” para usar o banco de dados local da plataforma.

 

 

Admin bar avatar
Lucas Firmino
Desenvolvedor Web Back-end na Action! Soluções tecnológicas. Instrutor na empresa APP Inventor Brasil. Estudante do Curso de Bacharelado em Sistemas de Informação.

Leave a comment