Armazenar informações localmente no computador de um usuário é uma estratégia poderosa para um desenvolvedor que está criando algo para o Web. Neste artigo, veremos como é fácil para armazenar informações em um computador para ler mais tarde com o uso de LocalStorage.
Com o uso do Local Storage é possível armazenar dados no dispositivo que o usuario está usando para acessar a aplicação sem ser necessário consultas consultas complicadas e acumulo de transações que existiriam em um banco de dados normal.
Por que não usar o Cookie então?
A maneira clássica de fazer isso é usando um cookie. Um cookie é um arquivo de texto hospedado no computador do utilizador e ligado ao domínio que o seu site é executado. Você pode armazenar informações neles, lê-los e excluí-los. Cookies têm algumas limitações no entanto:
Eles acrescentam a carga de carregamento de cada documento acessado no domínio.
Eles permitem somente 4KB de armazenamento de dados.
Como os cookies têm sido usados para espionar o comportamento de navegação das pessoas, as pessoas e empresas preocupadas com segurança podem inativa-los ou marcar para ser solicitado cada vez que um cookie deve ser definido.
Usando Local Storage em HTML5
Usando Local Storage em navegadores modernos é ridiculamente fácil. Tudo que você tem a fazer é modificar o objeto em JavaScript. Você pode fazer isso diretamente ou (e esta é provavelmente mais limpa) usar o método setItem() e getItem() :
// Gravar valor
localStorage.setItem('saborFavorito','chocolate');
No trecho a cima, gravamos na chave “saborFavorito” o conteúdo “chocolate”
// Ler o conteudo
var taste = localStorage.getItem('saborFavorito');
Para remover o item, você pode usar o método removeItem():
localStorage.removeItem('saborFavorito');
var taste = localStorage.getItem('saborFavorito');
// o valor de "teste" será null
Mas se quero guardar os dados apenas durante a sessão?
Você também pode usar sessionStorage , em vez de localStoragese se pretende que os dados sejam mantidos apenas até a janela do navegador ser fechada.
O uso limitado de apenas Strings
Uma lacuna irritante de armazenamento local é que você só pode armazenar strings nas diferentes chaves. Isto significa que quando você tem um objeto, ele não vai ser armazenado da maneira certa com seria em uma tabela.
Uma maneira de contornar isso é através de JSon usando os métodos nativosJSON.stringify()e JSON.parse() :
var carro = {};
carro.rodas= 4;
carro.portas = 2;
carro.som = 'vroom';
carro.nome = 'Astra';
localStorage.setItem('carro', JSON.stringify(carro));
console.log(JSON.parse(localStorage.getItem('carro')));
