Objektien tallentaminen HTML5:n localStorageen

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.

Kristopher Johnson
Muokattu kysymysT22 toukokuu 2017 в 12:20
Ohjelmointi
html5 javascript local-storage
T22 tammikuu 2010 в 4:05
18 näkymät
Ratkaisu

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));
Cœur
Muokattu vastausta T55 kesäkuu 2019 в 4:06
Kommentit (5)

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

Dave Jarvis
Muokattu vastausta T55 huhtikuu 2018 в 7:40
Kommentit (10)

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.

Kommentit (3)