sessionStorage-Proxy-Klassenbereich

Question

Ich frage mich, wie auf den nativen sessionStorage-Bereich innerhalb meiner benutzerdefinierten Methoden zugreifen.

Mein Beispiel:

https://jsfiddle.net/3mc7ao7j/1/

In Zeile 3 Ich möchte Proxy in die Lage sein, durch zu meiner Heimat sessionStorage nach meiner Mutation auf den Daten durchzuführen.

Wie kann ich jedoch wieder auf diesen Bereich zugreifen? Ich weiß, ich kann einfach anrufen:

sessionStorage.setItem()

Aber das funktioniert nur, weil es global verfügbar ist und es fühlt sich falsch, das zu tun. Vor allem, weil ich auch wissen möchte, wie ich das ohne ein Objekt, das nicht global verfügbar ist, machen kann, damit ich lernen kann, wie man andere Objekte bevollmächtigt.

Answer 1

Einige window Objekte wie location sind schreibgeschützt, es kann nützlich sein, Abstraktionen über sie zu erstellen oder DI für die Testbarkeit zu verwenden.

sessionStorage soll verwendet werden wie es ist. Normalerweise werden keine Abstraktionen darüber benötigt. Wenn die Funktionalität erweitert oder geändert werden soll, kann eine benutzerdefinierte Klasse erstellt werden. Es kann Storage Schnittstelle implementieren oder eigene besitzen.

Die Verwendung von Proxy ist hier nicht gerechtfertigt. Es ist langsam und beschränkt die Verwendung des Codes in ES5-Umgebungen.

Benutzerdefinierte Klassen oder Objekte können nur die ursprünglichen sessionStorage Methoden umbrechen. Da Lagerung API klein ist, in den Ergebnissen Wrapper-Klasse ~ 20 Zeilen Code:

class CustomSessionStorage { 
    get length() { 
    return sessionStorage.length; 
    } 

    getItem(key) { 
    return sessionStorage.getItem(key); 
    } 
    ... 
} 

sessionStorage Objekt ist exotisch. Obwohl es von Storage erbt, ist Storage kein Konstruktor, und sessionStorage Methoden sollten direkt an sessionStorage gebunden werden, so dass es nicht möglich ist, es nur mit CustomSessionStorage.prototype = sessionStorage arbeiten zu lassen. Zusätzlich sessionStorage hat length Eigenschaft Beschreibung, die auch gebunden werden sollte.

Eine allgemeinere Art und Weise, sie zu verlängern ist eine Basisklasse zu schaffen, die ursprünglichen Methoden wickelt und kann weiter ausgebaut werden:

function BaseSessionStorage() {} 

for (let prop of Object.getOwnPropertyNames(Storage.prototype)) { 
    if (typeof sessionStorage[prop] === 'function') { 
    // bind all sessionStorage methods 
    BaseSessionStorage.prototype[prop] = sessionStorage[prop].bind(sessionStorage); 
    } else { 
    // a proxy for other props, length is read-only getter 
    Object.defineProperty(BaseSessionStorage.prototype, prop, { 
     get:() => sessionStorage[prop], 
     set: val => { sessionStorage[prop] = val } 
    }); 
    } 
} 

class CustomSessionStorage extends BaseSessionStorage { 
    getItem(key) { 
    return super.getItem(key); 
    } 
    // the rest of API is inherited 
}