Ukládání objektů do HTML5 localStorage

Chci uložit objekt JavaScriptu v HTML5 localStorage , ale můj objekt se zřejmě převádí na řetězec.

Mohu ukládat a načítat primitivní typy a pole JavaScriptu pomocí localStorage , ale zdá se, že předměty nefungují. Měli by?

Zde je můj kód:

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

Výstup konzoly je

typeof testObject: object
testObject properties:
  one: 1
  two: 2
  three: 3
typeof retrievedObject: string
Value of retrievedObject: [object Object]

Připadá mi to jako setItem metoda převádí vstup na řetězec před jeho uložením.

Toto chování vidím v prohlížečích Safari, Chrome a Firefox, takže předpokládám, že jde o mé nepochopení specifikace webového úložiště HTML5, nikoli o chybu nebo omezení specifické pro prohlížeč.

Snažil jsem se pochopit smysl strukturovaného klonu algoritmus popsaný na http://www.w3.org/TR/html5/infrastructure.html. Úplně nerozumím tomu, co se tím říká, ale možná můj problém souvisí s tím, že vlastnosti mého objektu nejsou vyčíslitelné (???)

Existuje snadné řešení?

Aktualizace:W3C nakonec změnilo názor na specifikaci strukturovaného klonu a rozhodlo se změnit specifikaci tak, aby odpovídala implementacím. Viz https://www.w3.org/Bugs/Public/show_bug.cgi?id=12111. Tato otázka tedy již není 100% platná, ale odpovědi mohou být stále zajímavé.

Odpověď

Když se podíváte na dokumentaci Apple, Mozilla a Mozilla znovu, zdá se, že funkčnost je omezena na zpracování pouze párů klíč/hodnota řetězce.

Řešením může být stringifikace váš objekt před uložením a později jej analyzujte, až jej získáte:

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