Como armazenar objetos no armazenamento local do HTML5?

João E. -

Problema: Armazenando Objetos no Armazenamento Local HTML5

O Armazenamento Local no HTML5 permite que sites salvem dados no navegador do usuário. Ele suporta apenas o armazenamento de strings, o que dificulta salvar estruturas de dados complexas como objetos. Este problema precisa de uma solução para armazenar e recuperar objetos no Armazenamento Local.

Solução: Usando JSON para Armazenar Objetos no Local Storage

Convertendo Objetos em Strings

Para armazenar objetos no Local Storage, você pode usar JSON.stringify(). Este método transforma objetos JavaScript em strings JSON. Após a conversão, você pode armazenar a string no Local Storage.

Por exemplo:

const myObject = { name: "John", age: 30 };
const jsonString = JSON.stringify(myObject);
localStorage.setItem("user", jsonString);

Dica: Lidar com Referências Circulares

Ao usar JSON.stringify(), fique atento às referências circulares em seus objetos. Estas podem causar erros. Para evitar isso, você pode usar uma função replacer personalizada:

const replacer = (key, value) => {
  if (typeof value === 'object' && value !== null) {
    if (cache.includes(value)) return '[Circular]';
    cache.push(value);
  }
  return value;
};

const cache = [];
const jsonString = JSON.stringify(myObject, replacer);
localStorage.setItem("user", jsonString);

Recuperando e Analisando Objetos Armazenados

Para obter o objeto armazenado, use JSON.parse(). Este método transforma a string JSON armazenada de volta em um objeto JavaScript. Este processo restaura a estrutura e as propriedades do objeto.

Veja como você pode obter o objeto:

const storedJsonString = localStorage.getItem("user");
const retrievedObject = JSON.parse(storedJsonString);
console.log(retrievedObject.name); // Saída: John
console.log(retrievedObject.age);  // Saída: 30

Guia Passo a Passo para Armazenamento de Objetos no Local Storage

Preparando o Objeto para Armazenamento

Para armazenar um objeto no Local Storage, crie seu objeto JavaScript. Em seguida, use JSON.stringify() para convertê-lo em uma string. Veja um exemplo:

const userObject = {
  name: "Alice",
  age: 28,
  hobbies: ["reading", "swimming"]
};

const userString = JSON.stringify(userObject);

Dica: Lidando com Objetos Complexos

Ao trabalhar com objetos complexos que contêm funções ou referências circulares, considere usar uma função replacer personalizada com JSON.stringify() para lidar adequadamente com esses casos.

Armazenando o Objeto no Local Storage

Após preparar o objeto, use localStorage.setItem() para armazená-lo. Este método aceita dois argumentos: uma chave (uma string para identificar os dados) e o objeto convertido em string. Por exemplo:

localStorage.setItem("user", userString);

Recuperando o Objeto do Local Storage

Para obter o objeto armazenado, use localStorage.getItem() com a chave que você usou para armazenar os dados. Isso retorna a string armazenada. Em seguida, use JSON.parse() para converter a string de volta para um objeto. Veja como:

const storedUserString = localStorage.getItem("user");
const retrievedUserObject = JSON.parse(storedUserString);

console.log(retrievedUserObject.name);  // Saída: Alice
console.log(retrievedUserObject.hobbies[0]);  // Saída: reading