2017-09-01 4 views
0

Ich war unter der Annahme, dass sessionStorage instanziiert wird, nachdem eine Komponente bereitgestellt wurde und man über einen Aufruf componentDidMount darauf zugreifen kann.Zugriff sessionStorage bei componentDidMount

ich this script bin mit meiner sessionStorage über verschiedene Registerkarten zu erhalten:

(function() {  
    if (!sessionStorage.length) { 
    // Ask other tabs for session storage 
    localStorage.setItem('getSessionStorage', Date.now()); 
    }; 

    window.addEventListener('storage', function(event) { 
    if (event.key == 'getSessionStorage') { 
     // Some tab asked for the sessionStorage -> send it 
     localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage)); 
     localStorage.removeItem('sessionStorage'); 
    } else if (event.key == 'sessionStorage' && !sessionStorage.length) { 
     // sessionStorage is empty -> fill it 
     let data = JSON.parse(event.newValue); 
     for (key in data) { 
     sessionStorage.setItem(key, data[key]); 
     } 
     showSessionStorage(); 
    } 
}); 

    window.onbeforeunload = function() { 
    //sessionStorage.clear(); 
    }; 
})(); 

, die wie beabsichtigt zu funktionieren scheint.

Ich versuche, meine sessionStorage durch die componentDidMount Methode der folgenden (abgespeckte) Komponente zuzugreifen:

export default class Dashboard extends React.Component { 
    componentDidMount() { 
    console.log(window.sessionStorage.getItem('someData')); 
    } 

Die oben genannten Arbeiten wie auf dem gleichen Registerkarte vorgesehen. Wenn ich eine neue Registerkarte öffne, bekomme ich null aus der sessionStorage. Wenn ich die neue Registerkarte aktualisiere, erhalte ich den korrekten someData Wert.

EDIT:

Ich habe meine Implementierung zu ändern, ein Cookie zu verwenden, um auf meine Bedürfnisse zu erreichen, aber ich bin immer noch daran interessiert, das Problem und mögliche Lösungen.

Antwort

0

Es funktioniert wie vorgesehen.

Sitzungsspeicher funktioniert für Ihre aktuelle Sitzung. Wenn Sie eine neue Registerkarte öffnen, erstellen Sie eine neue Sitzung. Aus diesem Grund sind die anfänglichen Daten null.

Verwenden Sie localStorage, um Daten innerhalb von Registerkarten persistent zu machen.

Ich kenne Ihren Anwendungsfall nicht, aber beginnen Sie mit dem Austauschen von sessionStorage und localStorage.

Speichern Sie die normalen Dinge auf sessionStorage. Persist auf localStorage

+0

Wenn ich meine Daten auf 'localStorage' haben wollte, hätte ich das schon gemacht ... –

+0

Ich verstehe. Möglicherweise greift die Reaktionskomponente auf sessionStorage zu, bevor das Skript beendet wurde. Versuchen Sie, einen setTimout von 1-5 Sekunden zu implementieren und sehen Sie, ob es funktioniert. –

+0

Was Sie vorschlagen funktioniert, hat aber 2 große Probleme: 1) Es ist probabilistisch (es funktioniert vielleicht, aber es funktioniert möglicherweise nicht so gut) 2) Es fügt Ladezeit, die ich nicht will. –