localStorage no Javascript

Desenvolvimento Web
1

Alguém pode me ilustrar bem, de uma forma simples, como o método localStorage do Javascript é usado?

2 curtidas
3

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.

2 curtidas
2

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:

2 curtidas