web-dev-qa-db-fra.com

Enregistrer des objets Javascript dans sessionStorage

SessionStorage et LocalStorage permettent de sauvegarder des paires clé/valeur dans un navigateur Web. La valeur doit être une chaîne et enregistrer les objets js n’est pas trivial.

var user = {'name':'John'};
sessionStorage.setItem('user', user);
var obj = sessionStorage.user; // obj='[object Object]' Not an object

De nos jours, vous pouvez éviter cette limitation en sérialisant des objets en JSON, puis en les désérialisant pour les récupérer. Mais l'API de stockage passe toujours par les méthodes setItem et getItem.

sessionStorage.setItem('user', JSON.stringify(user));
var obj = JSON.parse(sessionStorage.getItem('user')); // An object :D

Puis-je éviter cette limitation?

Je veux juste exécuter quelque chose comme ça:

sessionStorage.user.name; // 'John'
sessionStorage.user.name = 'Mary';
sessionStorage.user.name // 'Mary'

J'ai essayé les méthodes defineGetter et defineSetter pour intercepter les appels, mais c'est un travail fastidieux, car je dois définir toutes les propriétés et mon objectif n'est pas de connaître les futures propriétés.

javascriptsession-storage
134
Ferran Basora

Vous pouvez utiliser les accesseurs fournis par l'API Web Storage ou écrire un wrapper/adaptateur. D'après votre problème avec defineGetter/defineSetter, il semble que l'écriture d'un wrapper/adaptateur représente un travail trop dur pour vous.

Honnêtement, je ne sais pas quoi vous dire. Vous pourriez peut-être réévaluer votre opinion sur ce qui constitue une "limitation ridicule". L'API de stockage Web est exactement ce qu'elle est censée être, un magasin de clés/valeurs.

16
Ryan Olds

Ne pouvez-vous pas "stringifier" votre objet ... puis utilisez sessionStorage.setItem() pour stocker cette représentation sous forme de chaîne ... puis lorsque vous en avez besoin sessionStorage.getItem() puis utilisez $.parseJSON() pour l'obtenir reculer?

Exemple de travail http://jsfiddle.net/pKXMa/

103
afreeland

La solution consiste à stringifier l'objet avant d'appeler setItem sur le sessionStorage.

var user = {'name':'John'};
sessionStorage.setItem('user', JSON.stringify(user));
var obj = JSON.parse(sessionStorage.user);
83
Ron

C'est une solution dynamique qui fonctionne avec tous les types de valeur, y compris les objets:

class Session extends Map {
  set(id, value) {
    if (typeof value === 'object') value = JSON.stringify(value);
    sessionStorage.setItem(id, value);
  }

  get(id) {
    const value = sessionStorage.getItem(id);
    try {
      return JSON.parse(value);
    } catch (e) {
      return value;
    }
  }
}

Ensuite :

const session = new Session();

session.set('name', {first: 'Ahmed', last : 'Toumi'});
session.get('name');
8
Abdennour TOUMI

Cas d'utilisation:

 sesssionStorage.setObj(1,{date:Date.now(),action:'save firstObject'});
 sesssionStorage.setObj(2,{date:Date.now(),action:'save 2nd object'}); 
 //Query first object
  sesssionStorage.getObj(1)
  //Retrieve date created of 2nd object
  new Date(sesssionStorage.getObj(1).date)

API

Storage.prototype.setObj = function(key, obj) {

        return this.setItem(key, JSON.stringify(obj))
    };

    Storage.prototype.getObj = function(key) {
        return JSON.parse(this.getItem(key))
    };
5
Abdennour TOUMI

Le stockage de session ne peut pas prendre en charge un objet arbitraire, car il peut contenir des littéraux de fonction (fermetures de lecture) qui ne peuvent pas être reconstruits après un rechargement de page.

4
Igor Urisman
    var user = {'name':'John'};
    sessionStorage['user'] = JSON.stringify(user);
    console.log(sessionStorage['user']);
3
Jijo Paulose

Vous pouvez également utiliser la bibliothèque du magasin qui l’exécute pour vous avec la capacité de navigation croisée.

exemple :

// Store current user
store.set('user', { name:'Marcus' })

// Get current user
store.get('user')

// Remove current user
store.remove('user')

// Clear all keys
store.clearAll()

// Loop over all stored values
store.each(function(value, key) {
    console.log(key, '==', value)
})
2
3Dos