Stockage d’objets dans HTML5 localStorage

Question

Je voudrais stocker un objet JavaScript HTML5 localStorage, mais mon objet est apparemment en train d'être converti en chaîne de caractères.

Je peux stocker et d'extraire des primitives JavaScript, des types et des tableaux à l'aide d' localStorage, mais les objets ne semblent pas fonctionner. Devraient-ils?

Voici mon code:

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

La sortie de la console est

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

Il me semble que l' setItem méthode est la conversion de la saisie d'une chaîne de caractères avant de les stocker.

Je vois ce comportement dans Safari, Chrome et Firefox, donc je suppose que c'est mon incompréhension de la de Stockage Web HTML5 spec, pas un navigateur spécifique bug ou d'une limitation.

J'ai essayé de donner un sens à l' structuré clone de l' algorithme décrit dans http://www.w3.org/TR/html5/infrastructure.html. Je ne comprends pas tout ce qu'il dit, mais peut-être que mon problème a à voir avec mon propriétés de l'objet n'étant pas énumérable (???)

Est-il une simple solution de contournement?

Answer 1

En regardant les Apple, Mozilla et Microsoft de la documentation, de la fonctionnalité semble être limitée pour ne traiter que de la chaîne de paires clé/valeur.

Une solution de contournement peut être à stringify votre objet avant de les stocker, et de les analyser ultérieurement lorsque vous récupérer:

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

Answer 2

Un peu à s'améliorer afin de Justin 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);
}

En raison de court-circuit d'évaluation, getObject() sera immédiatement renvoyer null si key n'est pas dans le Stockage. Elle permettra aussi de ne pas jeter un SyntaxError exception si value est "" (la chaîne vide; JSON.parse() ne peut pas gérer ça).

UPD. Ajout de la variable qui Marque Storer mentionné dans le commentaire

Answer 3

Vous trouverez peut-être utile d’étendre l’objet de stockage avec ces méthodes de pratiques :

De cette façon, vous obtenez la fonctionnalité que vous vouliez vraiment même si dessous l’API prend uniquement en charge les chaînes.

Answer 4

Étendre l’objet de stockage est la solution génial. Pour mon API, j’ai créé une façade pour localStorage et puis vérifiez si c’est un objet ou pas tout définir et obtenir.

Answer 5

Il y a une grande bibliothèque qui encapsule des nombreuses solutions pour qu’il supporte même les navigateurs plus anciens, appelés jStorage

Vous pouvez définir un objet

Et le récupérer facilement