Salva oggetti Javascript in sessionStorage

SessionStorage e LocalStorage consentono di salvare coppie chiave / valore in un browser web. Il valore deve essere una stringa e salvare 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, è ansible evitare questa limitazione serializzando gli oggetti su JSON e quindi deserializzandoli per recuperare gli oggetti. Ma l’API di archiviazione passa sempre attraverso i metodi setItem e 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 defineGetter e defineSetter per intercettare le chiamate ma è un lavoro noioso, perché devo definire tutte le proprietà e il mio objective non è conoscere le proprietà future.

    Puoi utilizzare gli accessor forniti dall’API Web Storage o 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 cosa sia una “limitazione ridicola”. L’API di archiviazione Web è esattamente ciò che dovrebbe essere, un archivio di chiavi / valore.

    Non potresti “stringificare” il tuo object … quindi usa sessionStorage.setItem() per memorizzare quella rappresentazione di stringa del tuo object … poi quando ti serve sessionStorage.getItem() e poi usa $.parseJSON() per ottenerlo indietro?

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

    La soluzione è stringificare l’object 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 dynamic 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)) }; 
      var user = {'name':'John'}; sessionStorage['user'] = JSON.stringify(user); console.log(sessionStorage['user']); 

    L’archiviazione di sessione non può supportare un object arbitrario perché potrebbe contenere valori letterali di funzione (chiusure di lettura) che non possono essere ricostruite dopo il ricaricamento di una pagina.

    Puoi anche utilizzare 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) })