Question

如何在本地存储中存储多个表单数据，我试图将多个表单数据存储在角度js的本地存储中。我尝试了以下代码：

 <form name="welcome">
    <input type='text' ng-model='pageData.field1' />
    <input type='text' ng-model='pageData.field2' />
    <input type='text' ng-model='pageData.field3' />
    </form>
    <form name="registration">
    <input type='text' ng-model='pageData2.field1' />
    <input type='text' ng-model='pageData2.field2' />
    <input type='text' ng-model='pageData2.field3' />
    </form>
    <form name="sendMail">
    <input type='text' ng-model='pageData3.field1' />
    <input type='text' ng-model='pageData3.field2' />
    <input type='text' ng-model='pageData3.field3' />
    </form>
    <script>
    myApp.service('dataService',function(){

       var cache;

       this.saveData = function(data){
          cache = data;
       };

       this.retrieveData = function(){
          return cache;
       };

    });
    myApp.controller('Ctrl1', function($scope, dataService){

       dataService.saveData($scope.pageData);

    });

    myApp.controller('Ctrl2', function($scope, dataService){

       $scope.pageData = dataService.retrieveData();

    });
    </script>

Answer 1

<!DOCTYPE html>
<html ng-app="testapp" >
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
 <div ng-controller="Ctrl1">
    <form name="welcome">
    <input type='text' ng-model='pageData1.field1' />
    <input type='text' ng-model='pageData1.field2' />
    <input type='text' ng-model='pageData1.field3' />
    <input type="button" value="welcomeBTn" ng-click="welcomeTo(pageData1);" />
    </form>
 </div>
 <div  ng-controller="Ctrl2">
   <form name="registraitonForm">
    <input type='text' ng-model='pageData2.field1' />
    <input type='text' ng-model='pageData2.field2' />
    <input type='text' ng-model='pageData2.field3' />
    <input type="button" value="regBTn" ng-click="registration(pageData2);" />
    </form>
    </div>
 <div  ng-controller="Ctrl3">
   <form name="mailToForm">
    <input type='text' ng-model='pageData3.field1' />
    <input type='text' ng-model='pageData3.field2' />
    <input type='text' ng-model='pageData3.field3' />
    <input type="button" value="mailBtn" ng-click="mailTo(pageData3);" />
    </form>
    </div>

<script type="text/javascript">


var app = angular.module('testapp', []);
    /*main controller at index page*/
app.service('dataService',function(){

   var self = this;

   self.saveData = function(key, data){
      localStorage.setItem(key, JSON.stringify(data));
   };

   self.retrieveData = function(key){
      return JSON.parse(localStorage.getItem(key));
   };
   return self;

});
app.controller('Ctrl1', function($scope, dataService){
  $scope.welcomeTo = function(pageData1){ 
   dataService.saveData('page1', pageData1); //  like this pass the key of the value to be stored in local storage

  }
});

app.controller('Ctrl2', function($scope, dataService){
  $scope.registration = function(pageData2) {
   dataService.saveData('page2', pageData2);
   console.log($scope.pageData2) //  like this pass the key of the value to be stored in local storage
  }
});


app.controller('Ctrl3', function($scope, dataService){

  $scope.mailTo = function(pageData3) {
  dataService.saveData('page3', pageData3);
  console.log($scope.pageData3)//  like this pass the key of the value to be stored in local storage
   console.log(dataService.retrieveData('page1'))
  }
});


</script>

</body>

https://plnkr.co/edit/kmBA3Cco8QNDL8i4eOjz?p=preview为你工作。

如何在angularjs中使用ngStorage多个表单？

1 个答案: