SessionStorage y LocalStorage permite guardar pares clave / valor en un navegador web. El valor debe ser una cadena y guardar objetos js no es trivial.

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

Hoy en día, puede evitar esta limitación al serializar objetos en JSON y luego deserializarlos para recuperar los objetos. Pero la API de almacenamiento siempre pasa por los métodos setItemy getItem.

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

¿Puedo evitar esta limitación?

Solo quiero ejecutar algo como esto:

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

He intentado los métodos defineGettery defineSetterpara interceptar las llamadas, pero es un trabajo tedioso, porque tengo que definir todas las propiedades y mi objetivo es no conocer las propiedades futuras.

Puede usar los accesores proporcionados por la API de almacenamiento web o puede escribir un contenedor / adaptador. Según su problema declarado con defineGetter / defineSetter, parece que escribir un contenedor / adaptador es demasiado trabajo para usted.

Sinceramente, no sé qué decirte. Tal vez podría reevaluar su opinión sobre lo que es una "limitación ridícula". La API de almacenamiento web es justo lo que se supone que es, un almacén de clave / valor.

¿No podría 'encadenar' su objeto ... luego usarlo sessionStorage.setItem()para almacenar esa representación de cadena de su objeto ... luego cuando lo necesite sessionStorage.getItem()y luego usar $.parseJSON()para recuperarlo?

Ejemplo de trabajo http://jsfiddle.net/pKXMa/

La solución es stringificar el objeto antes de llamar a setItem en sessionStorage.

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

Esta es una solución dinámica que funciona con todos los tipos de valores, incluidos los objetos:

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

Luego :

const session = new Session();

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

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

El almacenamiento de la sesión no puede admitir un objeto arbitrario porque puede contener literales de función (cierres de lectura) que no se pueden reconstruir después de una recarga de página.

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

También puede usar la biblioteca de la tienda que lo realiza para usted con la capacidad de crossbrowser.

ejemplo:

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

Puede crear 2 métodos de contenedor para guardar y recuperar objetos del almacenamiento de la sesión.

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

Úselo así: - Obtenga un objeto, modifique algunos datos y guarde de nuevo.

var obj = getSession();

obj.newProperty = "Prod"

saveSession(obj);