Speichern Sie Javascript-Objekte in sessionStorage

152

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.

Ferran Basora
quelle
1
Daran habe ich selbst gedacht. Ich nehme an, viele Leute haben. Aber ich denke nicht, dass Getter- und Setter-Methoden eine zu große Belastung darstellen. Übrigens; Sie können mit JavaScript serialisieren und analysieren, und MS unterstützt endlich dieselben Standardobjekte wie alle anderen. Die Tage der Notwendigkeit für Pakete wie JSON und jQuery gehen schnell zu Ende.
Roger F. Gay
1
Ich glaube, ich sehe die Einschränkung nicht. Es mag übertrieben erscheinen, JSON.stringify und JSON.parse zu verwenden, wenn Sie immer nur triviale Objekte haben, aber wenn Sie sogar große Datenobjekte haben, erledigen diese beiden Methoden viel Arbeit für Sie.
Robusto
5
"Kann ich diese Einschränkung vermeiden?" scheint wie eine Frage
Sonicblis
1
Nun, Einschränkung oder nicht, diese Frage hat mir geholfen, ein Problem zu lösen, also danke.
Matt West

Antworten:

19

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.

Ryan Olds
quelle
8
Entschuldigung, wenn ich ein unangemessenes Wort mit "lächerlich" verwendet habe. Ersetzen Sie es durch "könnte so interessant sein". Ich denke, dass der webStorage eine der aufregendsten Verbesserungen des neuen Web ist. Speichern Sie jedoch nur Zeichenfolgen in der Wertschlüsselzuordnung, die meiner Meinung nach eine Einschränkung darstellt. Es scheint wie eine Fortsetzung von Cookies. Ich weiß, dass der Speicher nicht nur eine Spezifikation für die Javascript-Sprache ist, sondern auch das Serialisieren von Objekten eine interessante Verbesserung darstellen könnte. Was denken Sie?
Ferran Basora
2
Wenn JSON nicht ausreicht, können Sie jederzeit Ihre eigenen Objektserialisierungsmethoden schreiben.
Ryan Olds
110

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/

Afreeland
quelle
Das funktioniert bei mir. Ich erhalte ein funktionierendes Json-Objekt, nachdem ich $ .parseJSON ()
Olafur Tryggvason
Einige Systeme wie die Web-Api-Authentifizierung geben Objekte in Form von Object {propertyOneWithoutQuotes: "<value1>", ... propertyNWithoutQuotes: "<valueN>"} zurück, die "stringify" durchlaufen müssen. Wenn mehrere Quellen vorhanden sind, ist es möglicherweise besser, stringify zu verwenden, um die Daten zu standardisieren.
Jelgab
Das ist eine sehr gute Antwort. Es ist gut, JSON.stringify () zu verwenden, um Objekte zu serialisieren und in sessionStorage zu speichern. Anschließend wird $ .parseJSON () verwendet, um die Zeichenfolge zu de-serialisieren und das Objekt abzurufen.
Thomas.Benz
102

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);
Ron
quelle
Vielen Dank, dass Sie die Lösung nicht verlinkt haben
Luc-Olsthoorn
12

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');
Abdennour TOUMI
quelle
5

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))
    };
Abdennour TOUMI
quelle
4
Ich dachte, eine der besten Methoden in Javascript wäre, keine Prototypen von Objekten zu erstellen, die Sie nicht besitzen. Die Verwendung von Storage.prototype.setObj scheint eine schlechte Idee zu sein.
Britztopher
3
Fügen Sie einfach den obligatorischen Code hinzu. Stellen Sie sicher, dass Sie diesen Prototyp-Code nicht hinzufügen - und verlassen Sie sich ausschließlich darauf -, ohne vorher zu überprüfen, ob der Browser ihn unterstützt. Speicher:if (typeof (Storage) !== "undefined"){ /* browser supports it */ }
JoeBrockhaus
4

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.

Igor Urisman
quelle
3
    var user = {'name':'John'};
    sessionStorage['user'] = JSON.stringify(user);
    console.log(sessionStorage['user']);
Jijo Paulose
quelle
2

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)
})
3Dos
quelle
0

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);
JerryGoyal
quelle