Guardar objetos de Javascript en sessionStorage

Question

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, se puede evitar esta limitación seria objetos a JSON, y luego deserializar para recuperar los objetos. Pero la API de almacenamiento siempre pasa por los métodos setItem y getItem.

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

¿Puedo evitar esta limitación?

sólo quiero ejecutar algo como esto:

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

He probado los defineGetter y defineSetter métodos para interceptar las llamadas, pero es un trabajo tedioso, porque tengo que definir todas las propiedades y mi objetivo no es para conocer las propiedades futuras.

Answer 1

O puede usar los accesos proporcionados por la API de almacenamiento web o puede escribir un envoltorio/adaptador. Desde su problema establecido con defineGetter/defineSetter suena como escribir un wrapper/adaptador que es demasiado trabajo para usted.

Honestamente, no sé qué decirte. Tal vez podrías reevaluar tu opinión sobre lo que es una "limitación ridícula". La API de almacenamiento web es exactamente lo que se supone que es, un almacén de claves/valores.

Answer 2

¿No podría 'stringify' su objeto ... luego use sessionStorage.setItem() para almacenar esa representación de cadena de su objeto ... entonces cuando lo necesite sessionStorage.getItem() y luego use $.parseJSON() para volverlo a sacar?

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

Answer 3

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

Answer 4

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

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

Answer 5

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

Answer 6

Ésta es una solución dinámica que funciona con todos los tipos de valores que incluyen 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; 
    } 
    } 
} 

continuación:

const session = new Session(); 

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

Answer 7

También es posible usar el store library que lleva a cabo para tú con la habilidad del navegador cruzado.

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