Local Storage – Armazenamento de dados no navegador

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