No desenvolvimento de aplicações web o desenvolvedor se vê na necessidade de guardar dados em uma troca de sessão ou atualização de uma página para outra. No HTML 5 é possível fazer um armazenamento de dados no lado do cliente usando a API Web Storage. Essa API possibilita utilizar a área de armazenamento do navegador e guardar dados sem limite de tempo.
O uso da API é bem simples e baseado em chave-valor.
Método setItem
Método utilizado para armazenar valores onde uma chave sempre é utilizada como referência.
window.localStorage.setItem(‘nome’, ‘Marta Silva Rocha’);
window.localStorage.setItem(‘idade’, 28);
Método getItem
Para resgatar o valor armazenado anteriormente utilizamos o método getItem.
var nome = window.localStorage.getItem(‘nome’);
var idade = window.localStorage.getItem(‘idade’);
console.log(nome); // Marta Silva Rocha
console.log(idade); // 28
Método removeItem
removeItem() tem o objetivo de apagar da área de transferência o par armazenado nome/valor.
window.localStorage.removeItem('nome')//apaga o valor armazenado em nome
window.localStorage.removeItem('idade') //apaga o valor armazenado em idade
Podemos usar o método clear() também. Esse método não requer parâmetros e destina-se a apagar todo o conteúdo da área de armazenamento.
localStorage.clear();
Método length
Propriedade que mostra a quantidade de dados armazenados no objeto localStorage.
localStorage.length
Método key
Método que mostra o nome da chave que foi armazenada na posição passada. O Exemplo abaixo iria retornar o nome da primeira chave.
localStorage.key(0)
Caso queira ver o valor que foi armazenado nessa chave pode fazer:
localStorage.getItem(localStorage.key(0))
Fonte:
Conteúdo baseado no site: https://www.kadunew.com/blog/html/html5-local-storage-armazenamento-de-dados-no-navegador
Comentários