Haluaisin tallentaa JavaScript-objektin HTML5:n localStorage
-tietokantaan, mutta objektini muunnetaan ilmeisesti merkkijonoksi.
Voin tallentaa ja hakea primitiivisiä JavaScript-tyyppejä ja matriiseja localStorage
:n avulla, mutta objektit eivät näytä toimivan. Pitäisikö niiden toimia?
Tässä on koodini:
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);
Konsolin tuloste on
typeof testObject: object
testObject properties:
one: 1
two: 2
three: 3
typeof retrievedObject: string
Value of retrievedObject: [object Object]
Minusta näyttää siltä, että setItem
-metodi muuntaa syötteen merkkijonoksi ennen sen tallentamista.
Näen tämän käyttäytymisen Safarissa, Chromessa ja Firefoxissa, joten oletan, että kyseessä on väärinkäsitys HTML5 Web Storage -spekseistä, eikä mikään selainkohtainen vika tai rajoitus.
Olen yrittänyt ymmärtää strukturoitua kloonausalgoritmia, joka on kuvattu osoitteessa http://www.w3.org/TR/html5/infrastructure.html. En ymmärrä täysin, mitä siinä sanotaan, mutta ehkä ongelmani liittyy siihen, että objektini ominaisuudet eivät ole luettavissa (????).
Onko olemassa helppoa ratkaisua?
Päivitys: W3C muutti lopulta mieltään strukturoitujen kloonien määrittelystä ja päätti muuttaa määrittelyä vastaamaan toteutuksia. Katso https://www.w3.org/Bugs/Public/show_bug.cgi?id=12111. Kysymys ei siis ole enää 100-prosenttisesti pätevä, mutta vastaukset voivat silti kiinnostaa.
Kun tarkastellaan Applen, Mozillan ja Mozillan uudelleen dokumentaatiota, toiminnallisuus näyttää rajoittuvan vain merkkijonoavain/arvoparien käsittelyyn.
Vaihtoehtona voi olla merkkijonon muuttaminen ennen objektin tallentamista ja sen jäsentäminen myöhemmin, kun sitä haetaan:
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));
Pieni parannus varianttiin:
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);
}
Oikosulkuarvioinnin takia getObject()
palauttaa välittömästi null
, jos key
ei ole Storageissa. Se ei myöskään heitä SyntaxError
-poikkeusta, jos value
on ""
(tyhjä merkkijono; JSON.parse()
ei voi käsitellä sitä).
Saattaa olla hyödyllistä laajentaa Storage-oliota näillä kätevillä metodeilla:
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
return JSON.parse(this.getItem(key));
}
Näin saat toiminnallisuuden, jonka oikeasti halusit, vaikka API tukeekin alhaalla vain merkkijonoja.