Alguém pode me ilustrar bem, de uma forma simples, como o método localStorage do Javascript é usado?
Lembrando que no localStorage vc consegue salvar apenas dados(nomes, números, etc). Ele não salva elementos do Html e CSS(cores, formatos,
, , etc.) Para salvar os dados vc vai precisar converter eles usando o JSON.stringify. E depois para puxá-los de novo do localStorage para sem exibidos na página vc converte de volta suando o JSON.parse.
O metodo localStorage basicamente é um sistema de armazenamento local no navegador de quem está acessando o site.
Basicamente é um sistema de chave
e valor
(key/value) onde você pode adicionar itens, obter itens e remover itens. Vamos ao exemplo.
Exemplo: Armazenando nome do usuário
Quando o usuário acessar o site pela primeira vez vamos perguntar para ele o nome dele através da função prompt
do javascript. Vamos armazenar o resultado em uma variavel e salvar no localStorage
.
let nome = prompt("Qual é o seu nome?")
// vamos salvar o valor da variavel em uma chave no localStorage
window.localStorage.setItem("nome_usuario", nome)
Beleza, porem se o usuário acessar novamente o site eu gostaria de verificar se o nome ja foi preenchido em outra ocasião para não precisar perguntar o nome mais uma vez.
Então podemos obter o valor no localStorage
pela chave
e verificar se existe algum valor.
Se existir, usamos esse valor. Se não existir, perguntamos novamente.
// verifica se existe valor na chave
let nome = window.localStorage.getItem("nome_usuario")
if (nome) {
alert('Bem vindo ' + nome);
} else {
let nome = prompt("Qual é o seu nome?")
window.localStorage.setItem("nome_usuario", nome)
}
Complementando com o ponto importante do @Junior_santos , tambem podemos armazenar JSON porém sempre usando o JSON.stringify
para transformar JSON em em String e JSON.parse
para recuperar de string para Object novamente.
const dados_objeto = {
usuarios: [
{"nome": "Guilherme", "idade": 28},
{"nome": "Programador", "idade": 28}
],
n_users: 2
}
window.localStorage.setItem('dados_json', JSON.stringify(dados_objeto))
const dadosRecuperados = JSON.parse(window.localStorage.getItem('dados_json'))
console.log('dados recuperados', dadosRecuperados)
Conclusão
Lembrando que o localStorage
armazena informações no navegador, então se o usuário limpar o navegador ou acessar de outro navegador, as informações são perdidas.
Normalmente as pessoas usam para situações simples e armazenar coisas temporárias para evitar ter que usar um banco de dados mais robusto ou gastar recursos com requisição.
Link da documentação com mais detalhes e exemplos: