Armazenando objetos JavaScript em HTML5 localStorage e sessionStorage

Trabalhando com objetos no armazenamento web

Ao trabalhar com localStorage ou sessionStorage HTML5, os desenvolvedores geralmente encontram problemas ao tentar armazenar objetos JavaScript. Ao contrário dos tipos de dados e matrizes primitivos, os objetos parecem ser convertidos em strings, o que pode causar confusão e resultados inesperados.

Compreender como armazenar e recuperar objetos adequadamente usando o Web Storage é crucial para muitas aplicações web. Este guia explorará por que os objetos são convertidos em strings e fornecerá uma solução simples para garantir que seus objetos sejam armazenados e recuperados corretamente.

Comando	Descrição
JSON.stringify()	Converte um objeto ou valor JavaScript em uma string JSON, permitindo o armazenamento em localStorage ou sessionStorage.
localStorage.setItem()	Armazena um par de valores-chave no objeto localStorage, permitindo que os dados persistam nas sessões do navegador.
localStorage.getItem()	Recupera o valor associado a uma determinada chave do localStorage.
JSON.parse()	Analisa uma string JSON e a converte novamente em um objeto JavaScript, permitindo a recuperação de estruturas de dados complexas.
sessionStorage.setItem()	Armazena um par de valores-chave no objeto sessionStorage, permitindo que os dados persistam durante a sessão da página.
sessionStorage.getItem()	Recupera o valor associado a uma determinada chave do sessionStorage.

Armazenando e recuperando objetos de maneira eficaz no armazenamento da Web

Em JavaScript, e são objetos de armazenamento na web que permitem salvar pares de valores-chave no navegador. No entanto, essas soluções de armazenamento suportam apenas strings, o que significa que a tentativa de armazenar um objeto JavaScript diretamente resultará na conversão do objeto em uma representação de string como . Para armazenar objetos de forma eficaz, você precisa convertê-los em uma string JSON usando JSON.stringify(). Este método pega um objeto JavaScript e retorna uma string JSON, que pode ser armazenada em ou .

Para recuperar o objeto armazenado, você deve converter a string JSON novamente em um objeto JavaScript usando . Este método pega uma string JSON e retorna o objeto JavaScript correspondente. Os scripts fornecidos nos exemplos acima demonstram esse processo. Primeiro, um objeto é criado e convertido em uma string JSON com antes de ser armazenado em usando localStorage.setItem(). Para recuperar o objeto, a string JSON é obtida de usando e depois analisado novamente em um objeto JavaScript usando .

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in localStorage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from localStorage and convert it back to an object
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in sessionStorage
sessionStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from sessionStorage and convert it back to an object
var retrievedObject = JSON.parse(sessionStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

Técnicas avançadas para armazenamento na Web

Ao usar HTML5 e , os desenvolvedores geralmente precisam armazenar dados mais complexos do que apenas strings. Embora a serialização e desserialização JSON sejam eficazes para objetos básicos, cenários mais avançados podem exigir considerações adicionais. Por exemplo, se estiver trabalhando com objetos profundamente aninhados ou objetos contendo métodos, você precisará de uma abordagem mais sofisticada. Uma técnica comum é usar uma biblioteca como ou circular-json para lidar com referências circulares e estruturas de objetos mais complexas.

Essas bibliotecas estendem o padrão e métodos para suportar serialização e desserialização de objetos com referências circulares, possibilitando uma solução mais robusta para armazenamento de objetos em armazenamento web. Outra consideração é a compactação de dados. Para objetos grandes, você pode usar bibliotecas como compactar os dados antes de armazená-los em localStorage ou , reduzindo a quantidade de espaço usado. Isto pode ser particularmente útil para aplicações que necessitam armazenar uma quantidade significativa de dados do lado do cliente.

1. Posso armazenar funções em ou ?
2. Não, as funções não podem ser armazenadas diretamente no armazenamento web. Você pode armazenar o código da função como uma string e usar para recriá-lo, mas isso geralmente não é recomendado devido a riscos de segurança.
3. Como lidar com referências circulares em objetos?
4. Use bibliotecas como ou que são projetados para lidar com referências circulares em objetos JavaScript.
5. Qual é o limite de armazenamento para ?
6. O limite de armazenamento para normalmente tem cerca de 5 MB, mas pode variar entre os navegadores.
7. Posso compactar dados antes de armazená-los?
8. Sim, você pode usar bibliotecas como para compactar seus dados antes de armazená-los em ou .
9. Como faço para armazenar uma matriz de objetos?
10. Converta a matriz em uma string JSON usando antes de armazená-lo em ou .
11. É seguro armazenar dados confidenciais em ?
12. Não, não é seguro armazenar dados confidenciais em pois é acessível através de JavaScript e pode ser comprometido se o site for atacado.
13. Eu posso usar em diferentes domínios?
14. Não, está restrito à mesma origem, o que significa que não pode ser acessado em domínios diferentes.
15. O que acontece se o usuário limpar os dados do navegador?
16. Todos os dados armazenados em e será removido se o usuário limpar os dados do navegador.

Armazenar e recuperar objetos de maneira eficaz no armazenamento da web HTML5 requer a conversão de objetos em strings JSON com e depois analisá-los de volta com . Este método garante que os dados permaneçam intactos e utilizáveis ​​em diferentes sessões do navegador. Ao compreender e utilizar essas técnicas, os desenvolvedores podem aproveitar o localStorage e o sessionStorage para tarefas de gerenciamento de dados mais complexas, melhorando a funcionalidade e o desempenho de seus aplicativos web.