Armazenamento de Objetos em HTML5 localStorage

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.

Kristopher Johnson
Pergunta editada :em
Programação
html5 javascript local-storage
6º janeiro 2010 в 4:05
17 vistas
Solução

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));
Cœur
Resposta editada :em
Comentários (5)

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).

Dave Jarvis
Resposta editada :em
Comentários (10)

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.

Comentários (3)