Angularjs 如何存储usrename并使其在任何地方都可访问？

我有一个文本字段：

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

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

---

我的首选是爱奥尼亚。

爱奥尼亚

在

角度

之上工作。您可以通过多种方式实现此功能：

1）使用常量文件保存您的值 创建一个名为constants.js的文件，将其包含在index.html中，如下所示：

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

在控制器文件中，将

用户名

值设置为：

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应用程序中可以忽略这一点，屏幕无法刷新，但如果您使用的是web应用程序，则不推荐使用此方法

2）使用服务传递常量 创建一个实用程序服务来保存变量

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

您可以在控制器中将其设置为：

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

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

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

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

通过以下方式在其他控制器中访问它：

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

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

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

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

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

3）使用本地存储 在这里，您可以使用本地存储的

HTML5

功能从浏览器的本地存储访问值

将登录控制器中的值设置为：

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

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

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

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

在接收控制器中，将其用作：

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

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

即使应用程序转到后台或退出，这也与该值相关。除非手动清除应用缓存或应用数据，否则将保存该值

要访问

$localStorage

，您需要使用

ngStorage

插件，您可以从该插件访问并按照安装说明进行操作，然后将

ngStorage

注入为：

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

现在，您已经准备好使用

$localStorage

，前提是您已将其包含在愿意访问它的控制器中

4） 使用会话存储
使用相同的

ngStorage

插件，您可以通过

$sessionStorage

使用会话存储

将登录控制器中的值设置为：

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

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

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

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

在接收控制器中，将其用作：

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

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

---

会话存储将在有限时间后过期的会话中保存数据。对于访问令牌等功能，建议使用此方法。对于用户名的这种情况，不建议使用此方法。

主要有两种方法来实现此目的：

1.通过使用常量

angular.module('ionicApp', ['ionic'])
    .constant('appConstant', {
        user: ''
    })

app.js

angular.module('ionicApp', ['ionic'])
    .constant('appConstant', {
        user: ''
    })

控制器

angular.module('ionicApp.home', ['ionic'])
    .controller('homeCtrl', ['$state', 'appConstant', function($state, appConstant) {
        'use strict';
        $scope.user = '';
        $scope.onClick = function() {

            appConstant.user = $scope.user;
        };
    }]);

angular.module('ionicApp.home', ['ionic'])
    .controller('homeCtrl', ['$state', '$localStorage', function($state, $localStorage) {
        'use strict';
        $scope.user='';
        $scope.onClick = function() {
          $localStorage.set('user', user);
        };
    }]);

html

<input type="text" ng-model="user">
<button ng-click="onClick()">Submit</button>

<input type="text" ng-model="user">
<button ng-click="onClick()">Submit</button>

html

<input type="text" ng-model="user">
<button ng-click="onClick()">Submit</button>

<input type="text" ng-model="user">
<button ng-click="onClick()">Submit</button>

提交

---

现在，您可以使用

$localStorage.get（'user'）

从任何控制器获取用户名。您使用的路由是什么？我更喜欢使用基于令牌的身份验证，在登录时将用户详细信息与令牌一起存储，在后续的身份验证中，提供者应该检查令牌是否有效，并允许系统访问存储在令牌中的用户详细信息，这是以这种方式保护的。