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

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

Answer 2

Le stockage de session ne peut pas prendre en charge un objet arbitraire car il peut contenir des littéraux de fonction (fermetures de lecture) qui ne peuvent pas être reconstruits après un rechargement de la page.

Answer 3

Vous pouvez créer deux méthodes enveloppantes pour sauvegarder et récupérer des objets dans le stockage de session.

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

Utilisez-le comme suit : récupérez un objet, modifiez certaines données et sauvegardez-le.

var obj = getSession();

obj.newProperty = "Prod"

saveSession(obj);

Answer 4

Vous pouvez également utiliser le bibliothèque de magasin qui l'exécute pour vous avec la possibilité de croiser les navigateurs.

exemple :

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

Answer 5

J'ai trouvé cette bibliothèque adaptée à mes besoins : http://www.jstorage.info