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

如何将多个表单数据存储在本地存储中，我试图在角度js中将多个表单数据存储在本地存储中。我想下面的代码：如何在angularjs中为多个表单使用ngStorage？

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

来源

2016-12-27 ramesh kumar

这是什么问题？ – Sajeetharan

您的代码没问题，但每次只能存储一个pageData。如果你想存储多个表单，你需要修改你的代码。 – superUser

<!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为你工作plunker。

来源

2016-12-27 12:42:09

dataService.saveData（$ scope.pageData）;在这里我们存储欢迎表单数据$ scope.pageData但其他形式如注册$ scope.pageData2和$ Scope.pageData3我该怎么办？ –

你可以在jsfiddle或plnkr中显示我，我试过但仍然没有来临 –

实际上每次都有数据被替换。等待我将改变 –

回答

相关问题