SAPUI5: Datenpersistenz-Management mit Web Storage (sessionStorage & localStorage)

Ein Leitfaden zum Schutz kritischer Formentwürfe und Benutzereinstellungen vor Seitenaktualisierungen, dem Schließen von Tabs oder dem Browserverlauf innerhalb einer Anwendung, einschließlich FLP-Isolierung und Sicherheitsstandards.

In der SAPUI5-Architektur ist die Verwendung von URL-Parametern nicht immer der richtige Ansatz für die Datenübertragung zwischen Seiten oder für Prozesse zur Zustandserhaltung (State Persistence). Insbesondere komplexe Objektstrukturen oder Formentwürfe (Draft Data) können an die Grenzen von URLs stoßen. In solchen Szenarien kommen die HTML5 Web Storage APIs (sessionStorage und localStorage) ins Spiel. In diesem Leitfaden behandeln wir die Standards für die sichere, isolierte und optimierte Nutzung dieser beiden Strukturen in einer unternehmensweiten Fiori Launchpad (FLP)-Umgebung.

💡 Auswahl- und Architekturregeln für Web Storage

Lebenszyklus-Matrix: Das Verhalten von Web-Storage-Strukturen bei F5 (Neuladen) und Schließaktionen muss klar unterschieden werden:
- sessionStorage: Bleibt bei F5 / Neuladen oder bei Navigationen im selben Tab erhalten; wird beim Schließen des Tabs oder Browsers gelöscht.
- localStorage: Bleibt auch nach F5, dem Schließen eines Tabs oder einem Neustart des Browsers dauerhaft bestehen, bis es explizit gelöscht wird.
🛑 Kritischer Sicherheitshinweis (XSS-Risiko): Alle clientseitigen JavaScript-Codes können auf Daten im Web Storage zugreifen. Da diese Daten bei einer potenziellen Cross-Site-Scripting (XSS)-Schwachstelle gestohlen werden könnten, dürfen sensible Informationen wie JWT-Token, Access/Refresh-Token oder vertrauliche Kundendaten niemals im Storage gespeichert werden.
Speicherlimits: Es gibt ein striktes Speicherlimit von ca. 5–10 MB pro Browser. Daher sollten große Tabellendatensätze (Dataset) oder Medien-/Binärdateien nicht in die Speicherschicht geschrieben werden.
Fiori Launchpad-Isolierung: In Anwendungen, die unter dem SAP FLP laufen, sollte localStorage.clear() niemals ausgelöst werden. Da dieser Befehl die gesamte Domäne löscht, werden auch die Daten anderer unabhängiger Fiori-Anwendungen auf dem Launchpad gelöscht. Aus diesem Grund sollte immer das schlüsselbasierte removeItem() bevorzugt werden.
Unternehmensweite Namensgebung (Namespace): Um Konflikte zu vermeiden, sollte anstelle von generischen Namen wie ui5_app_order_draft ein umgekehrtes Domänenformat (Reverse Domain Naming - z. B. com.bezne.fi.order.draft) verwendet werden.

💻 Browserspeicher und Modellintegrationsreferenz

0. JavaScript Storage und Zustandssteuerung (Main.controller.js)

Sichere Datenserialisierung, Datensynchronisation ohne Beeinträchtigung der Modellreferenz, defensive Bereinigung im Fehlerfall und TTL (Time-To-Live)-Logik.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/m/MessageToast"
], function (Controller, JSONModel, MessageToast) {
    "use strict";

    return Controller.extend("com.bezne.app.controller.Main", {

        onInit: function () {
            // Initialize view model with empty structure to preserve bindings
            this.getView().setModel(new JSONModel({ formData: {} }), "localViewModel");
            
            // Standard reverse domain keys for tracking application data state
            this._sStorageKey = "com.bezne.fi.order.draft";
            
            // Restore persistent state securely on application load
            this._restoreAppState();
        },

        onSaveDraftToSession: function () {
            // Defensive check to ensure browser storage capabilities are active
            if (!this._isStorageSupported(sessionStorage)) {
                return;
            }

            var oViewModel = this.getView().getModel("localViewModel");
            var oFormData = oViewModel.getProperty("/formData");

            // Design custom object wrap supporting Time-To-Live (TTL) logic
            var oStorageWrapper = {
                data: oFormData,
                timestamp: new Date().getTime(),
                ttl: 3600000 // 1 Hour lifespan in milliseconds
            };

            try {
                var sSerializedData = JSON.stringify(oStorageWrapper);
                sessionStorage.setItem(this._sStorageKey, sSerializedData);
                MessageToast.show("Form draft preserved safely.");
            } catch (oException) {
                console.error("Data serialization failed: ", oException);
            }
        },

        _restoreAppState: function () {
            if (!this._isStorageSupported(sessionStorage)) {
                return;
            }

            var sSavedSessionData = sessionStorage.getItem(this._sStorageKey);
            var oViewModel = this.getView().getModel("localViewModel");

            if (sSavedSessionData) {
                try {
                    var oParsedWrapper = JSON.parse(sSavedSessionData);
                    var iCurrentTime = new Date().getTime();

                    // Evaluate Time-To-Live expiration validity
                    if (iCurrentTime - oParsedWrapper.timestamp > oParsedWrapper.ttl) {
                        console.warn("Storage entry has expired. Evicting data nodes.");
                        sessionStorage.removeItem(this._sStorageKey);
                        return;
                    }

                    // Best Practice: Use setData with merge flag instead of overwriting the whole model reference.
                    // This keeps UI control bindings intact without requiring reconnection.
                    oViewModel.setData({ formData: oParsedWrapper.data }, true);
                    console.log("Application state restored seamlessly from session cache.");

                } catch (oParseError) {
                    console.error("Malformed storage entry detected. Executing defensive eviction: ", oParseError);
                    // Defensive programming: remove corrupted trace immediately
                    sessionStorage.removeItem(this._sStorageKey);
                }
            }
        },

        onClearCachedState: function () {
            if (this._isStorageSupported(sessionStorage)) {
                // Best Practice for FLP: Evict targeted key via removeItem instead of global clear()
                sessionStorage.removeItem(this._sStorageKey);
                
                var oViewModel = this.getView().getModel("localViewModel");
                oViewModel.setProperty("/formData", {}); // Flush UI layout
                
                MessageToast.show("Application storage nodes synchronized and cleared.");
            }
        },

        _isStorageSupported: function (oStorageType) {
            try {
                var sTestKey = "__storage_test__";
                oStorageType.setItem(sTestKey, sTestKey);
                oStorageType.removeItem(sTestKey);
                return true;
            } catch (e) {
                console.error("Web Storage API is inactive or unsupported in this runtime environment.");
                return false;
            }
        }
    });
});

Verpassen Sie nicht die neuen Codes in der Bibliothek!

Abonnieren Sie den Newsletter, um sofort über wöchentlich aktualisierte unternehmensweite SAPUI5/Fiori-Komponenten, Leistungstipps und Architekturentwürfe informiert zu werden.