如何在AngularJS中将值从表单存储到本地存储？

I have some code for adding the values from a form to the local storage, but when I tried the code, it is not running. I would like to store the form data in local storage by clicking the button. I am adding my sample code below:

我有一些代码用于将表单中的值添加到本地存储，但是当我尝试代码时，它没有运行。我想通过单击按钮将表单数据存储在本地存储中。我在下面添加我的示例代码：

App.controller('KeyController', function($scope,$localStorage) { 
		/*$scope.info = 'Welcome to Test';*/
		/*console.log(" Key controller is working ");*/
  
 

  $scope.api_url;
  $scope.api_token;    

    $scope.submit=function(){	
				localStorage.setItem('api_url','--------');
				localStorage.setItem('api_token','--------');

				console.log(api_url);
				console.log(api_token)
			}


	});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container">


 	<form role = "form" id="uriForm" name="authfrom">

	   <div class = "form-group">
	      <label for = "url">Enter the url to authenticate:</label>
	      <input type = "url" class = "form-control"  placeholder = "Enter the URL" ng-model="api_url" required="required">
	   </div>
	   
	    <div class = "form-group">
	      <label for = "Key">Enter the key here:</label>
	      <textarea class = "form-control" rows="5"  placeholder = "Enter the Key" ng-model="api_token" required="required"></textarea>
	   </div>
	   
	   <button class = "btn btn-default" ng-click="submit()">Explore!!</button>
	   <p class="warning">{{failed}}</p>
	</form>
</div>

2 个解决方案

#1

You haven't add your app.js file in html.
您还没有在html中添加app.js文件。
You didn't add your ng-app and ng-controller in html.
您没有在html中添加ng-app和ng-controller。
You were adding $localStorage in function which is not necessary.
您在函数中添加了$ localStorage，这是不必要的。
You were using wrong syntax for localStorage.setItem() Now I've edited your code and made this.
你使用了错误的localStorage.setItem（）语法现在我已经编辑了你的代码并做了这个。

Here is index.html page

这是index.html页面

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>App</title>
    <script src="angular/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="KeyController">
<div class="container">
<form>
       <div class = "form-group">
          <label for = "url">Enter the url to authenticate:</label>
          <input type = "text" class = "form-control"  placeholder = "Enter the URL" ng-model="api_url" required="required">
       </div>

        <div class = "form-group">
          <label for = "Key">Enter the key here:</label>
          <textarea class = "form-control" rows="5"  placeholder = "Enter the Key" ng-model="api_token" required="required"></textarea>
       </div>

       <button class = "btn btn-default" ng-click="submit()">Explore!!</button>
       <p class="warning">{{failed}}</p>
    </form>
</div>
</body>
</html>

Here is your app.js file:

这是你的app.js文件：

angular.module('app', [])
 .controller('KeyController', function($scope) { 
  $scope.api_url;
  $scope.api_token;
    $scope.submit=function(){   
        localStorage.setItem('api_url', JSON.stringify($scope.api_url));
        localStorage.setItem('api_token', JSON.stringify($scope.api_token));

        console.log($scope.api_url);
        console.log($scope.api_token)
    }
  });

You can copy paste this and check your self. First replace the reference of angular.min.js file.

你可以复制粘贴这个并检查你自己。首先替换angular.min.js文件的引用。

#2

Please go through the below code which has been corrected to bootstrap the angular module and set controller using ng-app and ng-controller.

请仔细阅读以下代码，该代码已更正为引导角度模块并使用ng-app和ng-controller设置控制器。

Code snippets posted on * cannot access localstorage for the reason mentioned here. So you'll need to run this code on your local development environment.

由于此处提到的原因，*上发布的代码片段无法访问localstorage。因此，您需要在本地开发环境中运行此代码。

angular
  .module('MyApp', []);

angular
  .module('MyApp')
  .controller('KeyController', [
    '$scope',
    function($scope) {
      /*$scope.info = 'Welcome to Test';*/
      /*console.log(" Key controller is working ");*/
      $scope.api_url;
      $scope.api_token;
      $scope.savedApiUrl = '';
      $scope.savedApiToken = '';

      $scope.submit = function() {
        localStorage.setItem('api_url', $scope.api_url);
        localStorage.setItem('api_token', $scope.api_token);

        var savedApiUrl = localStorage.getItem('api_url');
        var savedApiToken = localStorage.getItem('api_token');
        $scope.savedApiUrl = savedApiUrl;
        $scope.savedApiToken = savedApiToken;
        console.log($scope.savedApiUrl);
        console.log($scope.savedApiToken)
      }
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="container" ng-app="MyApp" ng-controller="KeyController">

  <form role="form" id="uriForm" name="authfrom">

    <div class="form-group">
      <label for="url">Enter the url to authenticate:</label>
      <input type="url" class="form-control" placeholder="Enter the URL" ng-model="api_url" required="required">
    </div>

    <div class="form-group">
      <label for="Key">Enter the key here:</label>
      <textarea class="form-control" rows="5" placeholder="Enter the Key" ng-model="api_token" required="required"></textarea>
    </div>

    <button class="btn btn-default" ng-click="submit()">Explore!!</button>
    <p class="warning">{{failed}}</p>
  </form>

  <p>Saved values from local storage</p>
  <p>API URL: {{savedApiUrl}}</p>
  <p>API Token: {{savedApiToken}}</p>
</div>

#1

You haven't add your app.js file in html.
您还没有在html中添加app.js文件。
You didn't add your ng-app and ng-controller in html.
您没有在html中添加ng-app和ng-controller。
You were adding $localStorage in function which is not necessary.
您在函数中添加了$ localStorage，这是不必要的。
You were using wrong syntax for localStorage.setItem() Now I've edited your code and made this.
你使用了错误的localStorage.setItem（）语法现在我已经编辑了你的代码并做了这个。