Como funciona o armazenamento local em javascript e como dominá-lo · gorpo85

localStorage é uma das APIs de armazenamento Web que lhe permite armazenar dados de forma persistente no browser do utilizador. Ao contrário de sessionStorage, que armazena dados até que o separador do browser seja fechado, localStorage mantém os dados até que sejam explicitamente removidos, mesmo que o browser seja fechado.

Como armazenar dados no local

Para armazenar dados em localStorage, utiliza o método setItem(). Este método aceita dois argumentos: a chave e o valor que pretende armazenar.

localStorage.setItem('username', 'amargo85');

Neste exemplo, a chave é “username” (nome de utilizador) e o valor associado é “amargo85”.

Recuperar dados do armazenamento local

const username = localStorage.getItem('username');
console.log(username);  // Exibe "amargo85"

Se a chave não existir, o método getItem() devolve null.

Remoção de dados do localStorage

Para remover um item específico do localStorage, utilize o método removeItem().

localStorage.removeItem('username');

Este código irá remover a chave “username” e o respetivo valor associado.

Remover todos os dados

Se pretender limpar todos os dados armazenados em localStorage, utilize o método clear().

localStorage.clear();

Este comando remove todos os pares chave/valor armazenados.

Manipulação de objectos

localStorage só aceita valores como strings. Por conseguinte, se pretender armazenar um objeto, deve primeiro convertê-lo numa cadeia JSON com JSON.stringify().

Exemplo: Armazenando um objeto

const user = { name: 'amargo85', age: 35 };
localStorage.setItem('user', JSON.stringify(user));

Recuperar o objeto

Para recuperar o objeto, é necessário convertê-lo de novo num objeto JavaScript com JSON.parse().

const user = JSON.parse(localStorage.getItem('user'));
console.log(user.name);  // Exibe "amargo85"

Verificar se o localStorage está disponível

Nem todos os browsers ou configurações permitem a utilização do localStorage. Por conseguinte, é boa prática verificar se está disponível antes de tentar utilizá-lo.

if (typeof(Storage) !== "undefined") {
    // localStorage is available
    console.log("localStorage is available");
} else {
    // localStorage is not available
    console.log("localStorage is not available");
}

Limitações do localStorage

Tamanho limitado: A maioria dos browsers permite-lhe armazenar até 5 MB de dados no localStorage.
Sincronização: o localStorage não é uma solução adequada para dados que precisam de ser sincronizados entre diferentes separadores ou janelas, uma vez que não desencadeia eventos automáticos quando são actualizados.
Acesso assíncrono: o localStorage funciona de forma síncrona, o que pode causar falhas na interface do usuário se for usado com grandes quantidades de dados.

Dicas para dominar:

Limpeza automática: Não se esqueça de remover dados antigos ou desnecessários para que eles não se acumulem.
Armazenamento seguro: Nunca armazene dados sensíveis, como senhas, diretamente no localStorage, pois eles podem ser acessados pelo console.
Alterar eventos: Utilize o evento de armazenamento para reagir a alterações no localStorage entre diferentes separadores ou janelas.

window.addEventListener('storage', (event) => {
    console.log('localStorage foi alterado:', event);
});

Espero que este conteudo de certa forma tenha ajudado a perceber um pouco mais sobre LocalStorage em Javascript