I'gostaria de armazenar um objeto JavaScript em HTML5 localStorage
, mas meu objeto está aparentemente sendo convertido para uma string.
Eu posso armazenar e recuperar tipos e arrays JavaScript primitivos usando localStorage
, mas objetos don't parecem funcionar. Deverão funcionar?
Aqui's o meu código:
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
console.log('typeof testObject: ' + typeof testObject);
console.log('testObject properties:');
for (var prop in testObject) {
console.log(' ' + prop + ': ' + testObject[prop]);
}
// Put the object into storage
localStorage.setItem('testObject', testObject);
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ' + retrievedObject);
A saída do console é
typeof testObject: object
testObject properties:
one: 1
two: 2
three: 3
typeof retrievedObject: string
Value of retrievedObject: [object Object]
Parece-me que o método setItem
está convertendo a entrada para uma string antes de armazená-la.
Eu vejo esse comportamento no Safari, Chrome e Firefox, então eu assumo que'é o meu mal entendido da especificação HTML5 Web Storage, não um bug ou limitação específica do navegador.
I'tentei dar sentido ao algoritmo do clone estruturado descrito em http://www.w3.org/TR/html5/infrastructure.html. Eu não'não entendo completamente o que diz's, mas talvez o meu problema tenha a ver com as propriedades do meu objecto's não serem enumeráveis (????)
Há uma solução fácil?
Atualização: O W3C eventualmente mudou de idéia sobre a especificação da estrutura-clone, e decidiu mudar as especificações para se adequar às implementações. Veja https://www.w3.org/Bugs/Public/show_bug.cgi?id=12111. Portanto, esta pergunta não é mais 100% válida, mas as respostas ainda podem ser de interesse.
Olhando a documentação Apple, Mozilla e Mozilla novamente, a funcionalidade parece ser limitada para lidar apenas com pares de chaves de string/valor.
Uma alternativa pode ser stringificar seu objeto antes de armazená-lo, e mais tarde analisá-lo quando você o recuperar:
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('retrievedObject: ', JSON.parse(retrievedObject));
Uma pequena melhoria em uma variante:
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
var value = this.getItem(key);
return value && JSON.parse(value);
}
Devido a avaliação de curto-circuito, getObject()
irá immediatamente retornar null
se key
não estiver no armazenamento. Ele também não irá lançar uma exceção SyntaxError
se value
for ""
(a string vazia; JSON.parse()
não pode lidar com isso).
Você pode achar útil estender o objeto de Armazenamento com estes métodos práticos:
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
return JSON.parse(this.getItem(key));
}
Desta forma você obtém a funcionalidade que realmente queria, mesmo que por baixo da API só suportem strings.