Sauvegarder les objets Javascript dans le sessionStorage

Question

SessionStorage et LocalStorage permettent de sauvegarder des paires clé/valeur dans un navigateur web. La valeur doit être une chaîne de caractères, et la sauvegarde des objets js n'est pas triviale.

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 le setItem y getItem méthodes.

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 ça :

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

J'ai essayé le defineGetter y defineSetter pour intercepter les appels mais c'est un travail fastidieux, car je dois définir toutes les propriétés et mon objectif n'est pas de connaître les propriétés futures.

Answer 1

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

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

Answer 2

Ne pourriez-vous pas " stringifier " votre objet... puis utiliser sessionStorage.setItem() pour stocker la représentation en chaîne de votre objet... et quand vous en avez besoin sessionStorage.getItem() et ensuite utiliser $.parseJSON() pour le faire ressortir ?

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

Answer 3

Vous pouvez soit utiliser les accesseurs fournis par l'API de stockage Web, soit écrire un wrapper/adaptateur. D'après le problème que vous avez rencontré avec defineGetter/defineSetter, il semble que l'écriture d'un wrapper/adaptateur représente trop de travail pour vous.

Honnêtement, je ne sais pas quoi vous 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.

Answer 4

Il s'agit d'une solution dynamique qui fonctionne avec tous les types de valeurs, 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');

Answer 5

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