SessionStorage et LocalStorage permettent d'enregistrer 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 les objets en JSON, puis en les désérialisant pour récupérer les objets. Mais l'API de stockage passe toujours par les méthodes setItemet 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 ceci:

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

J'ai essayé les méthodes defineGetteret defineSetterpour intercepter les appels, mais c'est un travail fastidieux, car je dois définir toutes les propriétés et ma cible n'est pas de connaître les propriétés futures.

Soit vous pouvez utiliser les accesseurs fournis par l'API de stockage Web, soit vous pouvez écrire un wrapper / adaptateur. D'après votre problème déclaré avec defineGetter / defineSetter, il semble que l'écriture d'un wrapper / adaptateur est trop de travail pour vous.

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

Ne pourriez-vous pas «stringifier» votre objet ... puis l'utiliser sessionStorage.setItem()pour stocker cette représentation sous forme de chaîne de votre objet ... puis quand vous en avez besoin sessionStorage.getItem()et ensuite l'utiliser $.parseJSON()pour le récupérer?

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

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

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

Il s'agit d'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');

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

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.

    var user = {'name':'John'};
    sessionStorage['user'] = JSON.stringify(user);
    console.log(sessionStorage['user']);

Vous pouvez également utiliser la bibliothèque de magasin qui l'exécute pour vous avec la capacité de crossbrowser.

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

Vous pouvez créer 2 méthodes de wrapper pour enregistrer et récupérer des objets à partir du stockage de session.

function saveSession(obj) {
  sessionStorage.setItem("myObj", JSON.stringify(obj));
  return true;
}

function getSession() {
  var obj = {};
  if (typeof sessionStorage.myObj !== "undefined") {
    obj = JSON.parse(sessionStorage.myObj);
  }
  return obj;
}

Utilisez-le comme ceci: - Obtenez un objet, modifiez certaines données et enregistrez-le.

var obj = getSession();

obj.newProperty = "Prod"

saveSession(obj);