angularjs - 如何存储用户名并使其随处可见？

Question

我有一个文本字段:

<input type="text" ng-model="user">

我有一个按钮可以重定向到另一个页面。在该页面上，我想打印用户输入的用户名。我该怎么做？

我偏爱 ionic 。

Answer 1

ionic 在 angular 之上工作。您可以通过多种方式实现此功能:

1) 使用常量文件来保存你的值

创建一个名为 constants.js 的文件，将其包含在您的 index.html 中:

<script src="Constants/Constants.js"></script>

在其中声明键值对组合为:

var url_config = {
      "USER_NAME" : "LOGIN_USER",
    };

在您的 Controller 文件中，将 USER_NAME 值设置为:

url_config.USER_NAME = $scope.user; //the model variable name that you had used

在您想要访问的位置使用此值:

$scope.loggedInUser = url_config.USER_NAME; // you will get the value here

这里的缺点是，如果您重新加载屏幕，该值将会丢失。这在您使用 phonegap 创建的 android 或 ios 应用程序中可以忽略，屏幕无法刷新，但如果您使用的是网络应用程序，这将不是一个值得推荐的方法。

2) 使用服务传递常量

创建实用程序服务以保留变量

angular.module('myApp').service('UtilityService', function () {                
    this.USER_NAME  = '';
});

您可以在您的 Controller 中将其设置为:

angular.module('myApp')
.controller('LoginController', function ($scope, UtilityService) {
     UtilityService.USER_NAME   = $scope.user;
});

在您的其他 Controller 中访问它:

angular.module('myApp')
    .controller('UserController', function ($scope, UtilityService) {
         $scope.loggedInUser = UtilityService.user;
    });

这是一种可靠的方法，也是推荐的方法。

3) 使用本地存储
在这里，您可以使用本地存储的 HTML5 功能来访问浏览器本地存储中的值。

将登录 Controller 中的值设置为:

angular.module('myApp')
    .controller('LoginController', function ($scope, $localStorage) {
         $localStorage.USER_NAME = $scope.loggedInUser;
    });

在接收 Controller 中使用它作为:

angular.module('myApp')
    .controller('UserController', function ($scope, $localStorage) {
         $scope.loggedInUser = $localStorage.USER_NAME;
    });

即使应用程序进入后台或退出，这也将保留该值。除非您手动清除应用缓存或应用数据，否则该值将被保存。

要访问 $localStorage，您将需要使用可以从 github 访问的 ngStorage 插件并按照安装说明进行操作，然后将 ngStorage 注入(inject)为:

var myApp = angular.module('app', ['ngStorage']);

现在您已准备好使用 $localStorage，前提是您已将其包含在您愿意访问它的 Controller 中。

4) 使用 session 存储
使用相同的 ngStorage 插件，您可以通过 $sessionStorage 使用 session 存储。

将登录 Controller 中的值设置为:

angular.module('myApp')
    .controller('LoginController', function ($scope, $sessionStorage) {
         $sessionStorage.USER_NAME = $scope.loggedInUser;
    });

在接收 Controller 中使用它作为:

angular.module('myApp')
    .controller('UserController', function ($scope, $sessionStorage) {
         $scope.loggedInUser = $sessionStorage.USER_NAME;
    });

session 存储将数据保存在 session 中，这些数据会在有限的时间后过期。对于访问 token 等功能，建议使用这种用法。对于用户名的这种情况，这不是推荐的方法