Mit SessionStorage und LocalStorage können Schlüssel / Wert-Paare in einem Webbrowser gespeichert werden. Der Wert muss eine Zeichenfolge sein, und das Speichern von js-Objekten ist nicht trivial.

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

Heutzutage können Sie diese Einschränkung vermeiden, indem Sie Objekte in JSON serialisieren und anschließend deserialisieren, um die Objekte wiederherzustellen. Die Speicher-API durchläuft jedoch immer die Methoden setItemund getItem.

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

Kann ich diese Einschränkung vermeiden?

Ich möchte nur so etwas ausführen:

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

Ich habe die Methoden defineGetterund versucht defineSetter, die Aufrufe abzufangen, aber es ist eine mühsame Aufgabe, da ich alle Eigenschaften definieren muss und mein Ziel darin besteht, die zukünftigen Eigenschaften nicht zu kennen.

Sie können entweder die von der Web Storage API bereitgestellten Accessoren verwenden oder einen Wrapper / Adapter schreiben. Aus Ihrem angegebenen Problem mit defineGetter / defineSetter geht hervor, dass das Schreiben eines Wrappers / Adapters zu viel Arbeit für Sie ist.

Ich weiß ehrlich gesagt nicht, was ich dir sagen soll. Vielleicht könnten Sie Ihre Meinung zu einer "lächerlichen Einschränkung" neu bewerten. Die Web Storage API ist genau das, was sie sein soll, ein Schlüssel- / Wertspeicher.

Könnten Sie Ihr Objekt nicht "stringifizieren" ... dann verwenden sessionStorage.setItem(), um diese String-Darstellung Ihres Objekts zu speichern ... dann, wenn Sie es brauchen, sessionStorage.getItem()und dann verwenden $.parseJSON(), um es wieder herauszuholen?

Arbeitsbeispiel http://jsfiddle.net/pKXMa/

Die Lösung besteht darin, das Objekt zu stringifizieren, bevor setItem im sessionStorage aufgerufen wird.

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

Dies ist eine dynamische Lösung, die mit allen Werttypen einschließlich Objekten funktioniert:

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

Dann :

const session = new Session();

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

Anwendungsfall:

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

Der Sitzungsspeicher kann kein beliebiges Objekt unterstützen, da er möglicherweise Funktionsliterale (Leseverschlüsse) enthält, die nach einem erneuten Laden der Seite nicht rekonstruiert werden können.

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

Sie können auch die Geschäftsbibliothek verwenden, die sie mit Crossbrowser-Fähigkeit für Sie ausführt.

Beispiel:

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

Sie können zwei Wrapper-Methoden zum Speichern und Abrufen von Objekten aus dem Sitzungsspeicher erstellen.

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

Verwenden Sie es folgendermaßen: - Objekt abrufen, Daten ändern und zurückspeichern.

var obj = getSession();

obj.newProperty = "Prod"

saveSession(obj);