web-dev-qa-db-fra.com

conserver angular après l'actualisation de la page

J'essaie de trouver un moyen de conserver mes variables angular avec l'actualisation de la page/entre les contrôleurs. Mon flux de travail est,

  • l'utilisateur se connecte via facebook et obtient un jeton d'accès
  • le jeton d'accès des utilisateurs sera utilisé à chaque demande

J'ai essayé de deux manières,

1 - Assigner le token à un rootScope Ne fonctionne pas

2 - En utilisant un factory

#app.js
'use strict';

angular.module('recipeapp', [])
 .run(['$rootScope', '$injector', 'Authenticate', function($rootScope,$injector, Authenticate){
            $injector.get("$http").defaults.transformRequest = function(data, headersGetter) {
                $injector.get('$http').defaults.headers.common['auth-token'] = Authenticate.getToken();
             }
        }]);

#factory
'use strict';
angular.module('recipeapp')
  .factory('Authenticate', function(){
    var factory = {};
    var accessToken = "";

    factory.setToken = function(token) {
       accessToken = token;
    }
    factory.getToken = function() {
       return accessToken;
    }

    return factory;

  })

#facebook controller
I set the the token with every successful login
Authenticate.setToken(data.app_token);

Mais le problème est, si je rafraîchis la page, Authenticate.getToken() devient vide. Je suis assez nouveau dans angular et je n'arrive pas à trouver un moyen de conserver mes données après une actualisation de page

toute aide serait très appréciée

angularjspage-refresh
20
sameera207

Vous pouvez utiliser localStorage. C'est vraiment simple à utiliser.

var token = "xxx";
localStorage.setItem("token", token);
localStorage.getItem("token"); //returns "xxx"
19
aacanakin

Lorsque vous actualisez une page, tout votre contexte JavaScript est perdu (y compris toutes les données enregistrées dans des variables).

Une façon de conserver les informations d'une session à une autre consiste à utiliser le stockage local du navigateur. Dans votre cas, vous voudrez probablement vérifier ngStorage .

11
bmleite

J'ai fait la même chose en utilisant $ window.localStorage.

C'est un peu similaire à la réponse acceptée.

var token = "xxx";
$window.localStorage.setItem("token",token);
$window.localStorage.getItem("token"); //returns "xxx"
$window.localStorage.removeItem("token"); //deletes token
4
Alankar Choudhary

vous pouvez utiliser des cookies

Pour mettre une variable simple

$cookies.put('user', 'abc');

Pour enregistrer un objet

$cookies.putObject('objSocket', anyObject);

et pour récupérer les données de l'utilisation des cookies

$cookies.getObject('objSocket');

et

$cookies.get('user');

Pour utiliser le code ci-dessus cookies.js cdnjs, c'est:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular-cookies.min.js"></script>

Maintenant, injectez $cookies dans votre contrôleur et ngCookies dans votre app.js

pour plus de détails https://docs.angularjs.org/api/ngCookies

3
Sunil Garg
use `localStorage.setItem("key",value);` to set the value.
use `localStorage.getItem("key");`to get the value.
use `localStorage.clear();`to clear the value which is set
0
Anirudh