SessionStorage e LocalStorage consente di salvare coppie chiave / valore in un browser Web. Il valore deve essere una stringa e il salvataggio di oggetti js non è banale.

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

Al giorno d'oggi, è possibile evitare questa limitazione serializzando gli oggetti su JSON e quindi deserializzandoli per ripristinare gli oggetti. Ma l'API di archiviazione passa sempre attraverso i metodi setIteme getItem.

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

Posso evitare questa limitazione?

Voglio solo eseguire qualcosa del genere:

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

Ho provato i metodi defineGettere defineSetterper intercettare le chiamate ma è un lavoro noioso, perché devo definire tutte le proprietà e il mio obiettivo non è conoscere le proprietà future.

È possibile utilizzare gli accessori forniti dall'API di archiviazione Web oppure scrivere un wrapper / adattatore. Dal tuo problema dichiarato con defineGetter / defineSetter sembra che scrivere un wrapper / adattatore sia troppo lavoro per te.

Onestamente non so cosa dirti. Forse potresti rivalutare la tua opinione su ciò che è una "limitazione ridicola". L'API di archiviazione Web è proprio quello che dovrebbe essere, un archivio chiave / valore.

Non potresti 'stringere' il tuo oggetto ... quindi utilizzare sessionStorage.setItem()per memorizzare quella rappresentazione in stringa del tuo oggetto ... quindi quando ne hai bisogno sessionStorage.getItem()e poi usare$.parseJSON() per rimetterlo fuori?

Esempio di lavoro http://jsfiddle.net/pKXMa/

La soluzione è di stringere l'oggetto prima di chiamare setItem su sessionStorage.

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

Questa è una soluzione dinamica che funziona con tutti i tipi di valore inclusi gli oggetti:

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

Poi :

const session = new Session();

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

Caso d'uso:

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

L'archiviazione della sessione non può supportare un oggetto arbitrario perché può contenere valori letterali di funzione (chiusure di lettura) che non possono essere ricostruiti dopo il ricaricamento di una pagina.

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

Puoi anche usare la libreria del negozio che la esegue per te con l'abilità crossbrowser.

esempio :

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

È possibile creare 2 metodi wrapper per il salvataggio e il recupero di oggetti dalla memoria di sessione.

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

Usalo in questo modo: - Ottieni oggetto, modifica alcuni dati e salva.

var obj = getSession();

obj.newProperty = "Prod"

saveSession(obj);