Javascript AngularJS：重新加载页面时如何使用会话存储

用户正在用不同类型的输入填写表单

在同一页上，他还可以从服务器上删除文件。单击按钮后，文件被删除，页面被重新加载，其他输入中所做的更改被重置

我读过一篇关于会话存储的文章，但目前我甚至在注入它时遇到了困难。（错误：$injector:unpr未知提供程序）

我认为它是js控制器中的delFile函数，它应该将数据保存到会话存储中，但是以后如何以及在何处检索它呢

jsp表单：

<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>

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!';
                    });
          };

        } 
  ]);

姓名：
类型：
{{type.description}}
是新的：
要上载的文件：


服务器文件：

{{serverFile.name}
从服务器删除

js控制器：

<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>

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!';
                    });
          };

        } 
  ]);

productApp.controller（'ProductController'[
“$scope”，
“$http”，
“$log”，
“$modal”，
“$filter”，
“$routeParams”，
“$location”，
“$window”，
“$sessionStorage”，
“产品服务”，
函数（$scope、$http、$log、$modal、$filter、$routeParams、$location、$window、$sessionStorage、productService）{
$scope.productId=$routeParams.productId；
$scope.types=[]；
$scope.myForm={}；
$scope.filesToUpload=[]；
productService.getTypes（）.then（函数（响应）{
$scope.types=response.data；
});
productService.getServerFiles（$scope.productId）。然后（函数（响应）{
$scope.serverFiles=response.data；
});
$scope.delFile=函数（文件）{
productService.deleteFileFromServer（文件$scope.productId）；
//在这里，我认为应该将数据保存到会话存储中，但以后如何以及在何处检索数据呢？
$window.location.reload（）；
};
$scope.save=function（）{
$http({
方法：“POST”，
url:“/product/app/save”，
标题：{'Content-Type'：未定义}，
转换请求：函数（数据）{
var formData=new formData（）；
append（'myForm'，新Blob（[angular.toJson（data.myForm）]{
类型：“application/json”
}));
对于（变量i=0；i<$scope.filesToUpload.length；i++）{
$log.info（“filesToUpload[i]：”+JSON.stringify（$scope.filesToUpload[i]）；
append（'files'，$scope.filesToUpload[i]）；
}
返回表单数据；
},
数据：{
myForm:$scope.myForm，
文件：$scope.filesToUpload，
},
}).成功（功能（数据）{
警惕（“一切顺利！”）；
$location.path（'/inProgress'）；
}).错误（函数（数据）{
$scope.$error='发生错误！'；
});
};
} 
]);

会话存储不是角度依赖关系，因此您无法注入它

如果您真的需要，您可以创建一个封装它的服务，然后注入服务（如果您愿意），但这不是必需的

SessionStorage是位于全局窗口对象上的。这意味着你可以达到它本身

sessionStorage.setItem（“keyname”、“YourValueAsString”）

---

会话存储不是角度依赖性，因此您无法注入它

如果您真的需要，您可以创建一个封装它的服务，然后注入服务（如果您愿意），但这不是必需的

SessionStorage是位于全局窗口对象上的。这意味着你可以达到它本身

sessionStorage.setItem（“keyname”、“YourValueAsString”）

---

回答正确！明白了。非常感谢。现在，如何使用这些数据？我看到有getItem（）函数等，但最好的方法是什么？假设表单中有大约20个不同的字段。我应该创建一些函数“加载”并将其放在我的控制器上吗？或者jsp文件中的标记？保存时，我可能会执行

sessionStorage.setItem（$scope.productId，JSON.stringify（$scope.myForm）

然后在加载控制器时，我

if（sessionStorage.hasOwnProperty（$scope.productId））{$scope.myForm=JSON.parse（sessionStorage.getItem（$scope.productId））}

回答正确！明白了。谢谢。现在，如何使用这些数据？我看到有getItem（）函数等，但最好的方法是什么？假设我在表单中有大约20个不同的字段。我应该创建一些函数“加载”并将其放在我的控制器或jsp文件中吗？保存时，我可能会执行

sessionStorage.setItem（$scope.productId，JSON.stringify（$scope.myForm）

然后在加载控制器时i

if（sessionStorage.hasOwnProperty（$scope.productId））{$scope.myForm=JSON.parse（sessionStorage.getItem（$scope.productId））