AngularJS: how to use session storage when reloading a page

Question

User is filling a form with different types of inputs.

On the same page he also can delete files from a server. After clicking a button a file is deleted, page is reloaded and changes made in other inputs are reset.

I've read a sessionStorage is something for me but currently I even have trouble injecting it. (Error: $injector:unpr Unknown Provider)

I think it delFile function in js controller it should be saving data to session storage, but how and where to retrieve it later?

jsp form:

<form ng-submit="save()">   

        <div>
            Name:
            <input type="text" ng-model="myForm.name" />
        </div>

        <div>
            Type:
            <select ng-model="myForm.type">
                <option ng-selected="{{type.id == myForm.type}}" ng-repeat="type in types" value="{{type.id}}">{{type.description}}</option>
            </select>
        </div>

        <div>
            Is new:
            <input type="checkbox" ng-model="myForm.isNew">
        </div>

        <div>
            Files to upload:
               <input type="file" file-input="filesToUpload" name="file" multiple />

               <br>

           Server files:
               <p ng-repeat="serverFile in serverFiles" >
                {{serverFile.name}}
                <button type="button" ng-click="delFile(serverFile)">Delete from server</button>
               </p>

        </div>

        <div>
            <input type="submit" value="Save it!" />
        </div>

    </div>
</form>

js controller:

productApp.controller('ProductController', [
        '$scope',
        '$http',
        '$log',
        '$modal',
        '$filter',
        '$routeParams',
        '$location',
        '$window',
        '$sessionStorage',
        'productService',
        function($scope, $http, $log, $modal, $filter, $routeParams, $location, $window, $sessionStorage, productService) {

            $scope.productId= $routeParams.productId;
            $scope.types= [];
            $scope.myForm = {};
            $scope.filesToUpload = [];

            productService.getTypes().then(function(response) {
                $scope.types = response.data;
            });

            productService.getServerFiles($scope.productId).then(function(response) {
                $scope.serverFiles = response.data;
            });

            $scope.delFile = function(file) {
                productService.deleteFileFromServer(file, $scope.productId);
                // here it should be saving data to session storage I believe, but how and where to retrieve it later?
                $window.location.reload();
            };

            $scope.save= function() {

                $http({
                      method: 'POST', 
                      url: '/product/app/save',
                      headers: {'Content-Type': undefined},
                      transformRequest: function (data) {                   
                          var formData = new FormData();
                          formData.append('myForm', new Blob([angular.toJson(data.myForm)], {
                               type: "application/json"
                          }));
                          for (var i = 0; i < $scope.filesToUpload.length; i++) {
                            $log.info("filesToUpload[i]: " + JSON.stringify($scope.filesToUpload[i]));
                               formData.append('files', $scope.filesToUpload[i]);
                          }

                          return formData;
                      },
                      data: {
                          myForm: $scope.myForm,
                          files: $scope.filesToUpload,
                      },
                    }).success(function(data) {
                        alert("All went well!");
                        $location.path('/inProgress');
                    }).error(function(data) {
                        $scope.$error = 'Error occurred!';
                    });
          };

        } 
  ]);

Answer 1

SessionStorage is not an angular dependecy therefor you can not inject it.

If You really want you can create a service that wraps it and then inject service if you want to but it isn't necessary.

SessionStorage is a located on the window object which is global. Which means that you can reach it as such sessionStorage.setItem("keyname", "YourValueAsString")

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage