Usando o localStorage para armazenamento de dados não sensíveis no Javascript

A API Web Storage é muito interessante no armazenamento de dados não sensíveis. Apresenta 2 propriedades: o sessionStorage, que armazena dados gravados até o termino da sessão do usuário, e o localStorage que armazena os dados “permanentemente” no navegador, sendo possível limpa-lo apenas através do javascript, limpando o cache do navegador ou manualmente na aba armazenamento do painel desenvolvedor do navegador.

De maneira simples, a estrutura de dados é a seguinte:

{
    key: 'value'
}

E apresenta 4 funções:

localStorage.setItem()

{
    const updateLocalStorage = () =>{
        localStorage.setItem("Maçãs": 3 )
    }
}

Aqui, simplesmente declaramos uma key e associamos a um valor

localStorage.getItem()

{
    const getItemLocalStorage = () =>{
        localStorage.getItem("Maçãs")
    }
}

recuperamos o valor do storage a partir da key

localStorage.removeItem()

{
    const removeItemLocalStorage = () =>{
        localStorage.removeItem("Maçãs")
    }
}

Removemos o item a partir de sua key do storage

localStorage.clear()

{
    const removeLocalStorage = () =>{
        localStorage.clear()
    }
}

Onde todas as chaves de armazenamento serão esvaziadas

Para aplicações simples onde o contato com uma db não é muito apropriado (o localStorage guarda até 5MB), a API pode quebrar um galho.