Automatisches Speichern von HTML-Formular in Session Storage in AngularJS

Question

Ich habe eine App, die ein HTML-Formular enthält, das Formular verwendet AngularJS Bedeutung Textfeld verwenden ng-model, um Daten in Objekte innerhalb der $scope zu speichern.

Beispiel:

In HTML:

<input type="text" ng-model="user.firstName"> 

In der Steuerung:

$scope.user = {} 

Nun, was ich versuche zu tun, Auto-Save-Benutzerdaten, wie sie geben Wenn die Seite versehentlich neu geladen/aktualisiert wird, sind die Daten immer noch vorhanden Sie müssen es nicht noch einmal tippen.

Ich habe diese müde:

<textarea type="text" class="form-control" id="Background" name="Background" ng-model="obj.background" ng-change="autosave()" required></textarea> 

In dem obigen Code Ich habe ng-change Funktion, die ausgeführt wird, wenn sich der Zustand des Textfeldes ändert.

$scope.autosave = function(){ 
    $window.sessionStorage.setItem("autosave", $scope.obj); 
} 

Die obigen Codeausgänge in diesen:

Meine Frage:

Wie kann ich richtig diese Arbeit machen, so dass alle Felder im Formular automatisch gespeichert werden und wenn die Seite wird versehentlich aktualisiert das Feld wird wieder mit den Daten gefüllt. Dies ist das erste Mal, dass ich mit Sitzungsspeicher arbeite, also bin ich etwas verwirrt.

Was ist der effizienteste Weg, dies zu erreichen.

Answer 1

Sie könnten es als JSON-Daten speichern, anstatt es direkt als Objekt zu verwenden.

Folgendes zurück

var me = JSON.parse(window.sessionStorage.getItem("me")) 

jetzt haben mir den Wert des gespeicherten Objekts

var obj = {}; 
obj.name = "dooley" 
obj.last = "bonheuaa" 

window.sessionStorage.setItem("me", JSON.stringify(obj)); 

Nachdem die Seite zu aktualisieren können Sie es tun.

Answer 2

In SessionStorage (https://developer.mozilla.org/fr/docs/Web/API/Window/sessionStorage) können Sie nur String-Objekt setzen.

Also, ich empfehle Ihnen, Stringify auf get/set der sessionStorage zu verwenden. See this post für weitere Informationen.