df-model-storage directive

This directive watch a model and serialize it in the session storage. The values will be restored in the page reload.

Single field with ng-model

If you have a single field with a ng-model present, just add the df-model-storage directive

{{testValue|json}}

Complex object

If you want to save a more complex model, add the df-model-storage directive with the name of the model as a value

<form data-df-model-storage="baseModel"
	<p><input type="text" data-ng-model="baseModel.input1"></p>
	<p><input type="text" data-ng-model="baseModel.input2"></p>
</form>

{{baseModel|json}}

Prefix model name

{{prefixedTestValue|json}}

Can be used for avoid clashing name, for example the same name in different pages or in a ng-repeat:

<div data-ng-init="vals = [{val : 'a'}, {val:'b'}, {val:'c'}]">
    <div data-ng-repeat="v in vals">
      <input data-ng-model="v.val" type="text" data-df-model-storage data-df-prefix="{{$index}}">
    </div>
  </div>

{{vals|json}}

Implementation details and note

The key used for saving the values in the session storage is the name of the model. Beware of clashes. You can use the df-prefix attribute for prefixing the model.

Set some value in the first input field and in the prefixed one, and then go to prefixed.html to check the difference.

Hooks

You can define the following hooks for handling any special cases

{
	onNotSupported: function(key) {
		alert('Please turn off private browsing');
	},
	onNoDataFound: function(key) {
		$log.error("Message from VerboseController: no stored data has been found for key", key);           
		return $timeout(function() {return 'no data found :D'}, 0); //example with a promise, you can return directly a value
	},
	onParseError: function(key, e) {
		$log.warn("Message from VerboseController: Something went wrong. Please try again later",e);
	},
	onSuccess: function(value) { 
		// you receive the value deserialized from the session storage, you must return the value or a promise. See the source code of this page.
		$log.debug('Message from VerboseController: successfully parsed:', value);
		return $timeout(function() {return value}, 0); //example with a promise
	}
}
  

Just add the attribute data-df-model-storage-conf="nameOfVariableFromScope".