Wie kann ich den Fensterstatus speichern und abrufen?

Question

Ich versuche, Funktionen zum Speichern und Abrufen von Fensterstatus zu schreiben, kann aber nicht herausfinden, wie das geht. Die Idee ist, dass Benutzer jederzeit einen "Schnappschuss" des Bildschirms machen können und beim nächsten Login in die App ihn zurückholen kann, außerdem kann er beliebig viele Schnappschüsse speichern. Zum Beispiel: auf der Seite habe ich 4 verschiedene geschlossene Panels mit einer Art von Filtern und 6 verschiedenen Tabs mit Gitter innerhalb (standardmäßig ist die erste Registerkarte geöffnet). Nun, sagen wir, ich habe 2 von 4 Panels geöffnet, einige Filter gesetzt und mit dem 5. Tab gearbeitet. Ich möchte den gesamten Fensterstatus speichern können (zum Beispiel "Mein Status 1"), und wenn ich mich das nächste Mal anmelde, wähle einfach "Mein Zustand 1" und bekomme meinen Fensterstatus zurück. ich bereits speichern und alle Gittereigenschaften im DB mit folgenden Funktionen abrufen:

Store:

$scope.state = {} 
$scope.saveStateString = function(store) { 
     $scope.state = JSON.stringify($scope.gridApi.saveState.save(store)); 
     // console.log("function save state string") 
    }; 

abrufen

if(objNode.folderId){ 
     eventService.singleFilter(nodeId) 
      .then(function (res) { 
        if (res.body){ 
     $scope.restoreStateString(JSON.parse(res.body)); 
       } 
      }); 
     } 
    else if (typeof objNode.folderId === "undefined"){ 
     return false 
    } 

    $scope.restoreStateString = function(restore) { 
     $scope.gridApi.saveState.restore($scope, restore); 
    }; 

Vorerst Ich versuche, Fensterstatus in localstorage zu speichern und zu tun nächstes:

var storeValue = null; 
     var keyName = null; 
     var _window = {}; 


     $scope.storeWorkspace = function(){ 

      for (prop in window) 
       _window[prop] = window[prop]; 

      storeValue = JSON.stringify(_window) 

      keyName = prompt("put your key name"); 
      localStorage.setItem(keyName, storeValue); 
     }; 

aber ich bekomme diesen Fehler

angular.js:13708 TypeError: Converting circular structure to JSON at Object.stringify (native)

ich klar verstehen, warum ich diesen Fehler bin immer, es Ursache JSON akzeptiert keine kreisförmige Objekte - Objekte, die auf sich selbst verweisen auch sehe ich aus console.log(_window), wie das „Fenster“, viele Objekte im Inneren hat so Ich entschied mich zu fragen: Wie Fenster Status speichern und abrufen?

Answer 1

Versuchen Sie nicht, das ganze window zu speichern. Speichern Sie den Status Ihrer Anwendung in einem separaten Objekt, z. state, die Sie dann auf das globale Objekt anhängen, wenn Sie unbedingt haben:

window.state = {}; // your application's state goes here 

var serializedState = JSON.stringify(window.state); // To be put into localStorage 

Vergewissern Sie sich, dass alle Informationen, die Sie benötigen, um Ihre App beim nächsten Start wieder aufzubauen in diesem Objekt enthalten ist, und nicht mehr als Das. Vermeiden Sie, wo möglich, den globalen Status.

Stellen Sie außerdem sicher, dass Ihr Objekt state nur serialisierbare Daten enthält. E.g. functions or symbols cannot be serialzied to a JSON string and will get lost in the process.

Answer 2

Die große Mehrheit der auf dem Objekt window gespeicherten Werte ist einfach nicht serialisierbar. Sie können JSON dafür nicht verwenden. Sie sollten stattdessen alle Änderungen, die Sie an window vornehmen, nachverfolgen und diese in einem separaten JSON-Objekt als POJO s speichern. Alternativ können Sie das ursprüngliche Objekt window beim Starten Ihrer Anwendung kopieren und dann nur die Unterschiede zwischen dem aktuellen Objekt window und der Originalkopie speichern.

In jedem Fall wird dies wahrscheinlich eine Versuchsprobe sein, abhängig davon, welche Bibliotheken Sie verwenden und wie sie globale Variablen verwenden. Sie werden wahrscheinlich feststellen, dass Sie bei der Serialisierung einige Daten manuell herausfiltern müssen. Best Practices würden vorschlagen nichts sollte auf das window Objekt schreiben. Wenn Sie Dinge schreiben, die auf das Objekt window schreiben, handelt es sich wahrscheinlich um Code, der sich schlecht verhält.

Answer 3

Mischen Sie nicht Anwendungsdaten und Ressourcen zu speichern, es ist riesig, schwer zu wiederverwenden und wird dazu führen, in andere Probleme zu laufen.

Halten Sie es einfach!

Konstrukt AppState Objekt mit dem, was man die Ansichten

var appState ={config:{}, data:{}}; 

Store nachladen erforderlich, um es in InternalStorage/session basierend auf, wie lange Sie für immer behalten vs pro Sitzung

localStorage.setItem("appState", appState); 

Bei der ersten App Start Logik, laden Sie Daten von internalStorage/sessionStorage oder Server und Sie können den vorhandenen Controller-Code ändern, um ihn an die Ansicht zu binden.

getApplicationData(){ 
var appState = localStorage.getItem("appState");//get it from browser storage 
if(!appState) 
    //get it from server 
return appState; 
} 

Dies ist robuster und performanter Ansatz.