angularjs ui-router stateparams invisible loses on page refresh

Question

Im working on a angular project, where i have set my states as shown below.

$stateProvider.state('UserPanel', {
    url: '/user',
    params: { userId: null },
    views: {
        'content@': {
            templateUrl: '/AngViews/UserPanel/UserPanel.UserDetails.html'
        }
    }
});

when i navigate to the view, it takes the params with it, so this part is working.

But when i update the page, it's loses the params. I know that if i defined the params in the url variable it will work. but i want to make it invisible.

I have found something like this, but don't know if it's gonna fix my problem. can't get it working if it does. anyone who can explain how this can be done?

Thanks for your time

When you refresh the app actually the full app will be restarted. So no previous data will be stored within the app. The only part that will not be refreshed is the url. So if you place the stateparam in the url it'll work otherwise you need to use localstorage or something like that to store the data. — Indranil Mondal, Sep 17 '15 at 07:32
i see. but is it possible to save it to local storage or cache it for just one page, and then remove it when it's changes states? — DaCh, Sep 17 '15 at 08:09
Yeah, that's possible. For each route there is a specific resolve function. So in the specific route you can set data in local storage and in other resolve you need to clear localstorage. — Indranil Mondal, Sep 17 '15 at 12:00
@DaCh: Was this issue resolved? I am facing the same issue... — ShankarGuru, Dec 03 '15 at 04:32
@ShankarGuru no i couldn't, so i just used the params like `url: '^/User/:userId', params: { userId: null },` This way it works, but the query string/routeparams is visible — DaCh, Dec 03 '15 at 08:07
@DaCh: was userID an string or object? can we pass object in url... — ShankarGuru, Dec 05 '15 at 04:39
@shankarGuru userid was in This case a string. I don't know if you could pass a object to a json string and use that as params. Or you could manually covert the object to params. — DaCh, Dec 05 '15 at 09:33

Ahmed Fahmy · Answer 1 · 2015-12-14T15:06:04.943

I faced the same problem and solved it with this code

angular.module('app').run(function($rootScope, $state, localStorageService) {

  $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
   var prefix = "stateParams.";
   var fromStateName = prefix + fromState.name;
   var toStateName = prefix + toState.name;
   var f = true;
   for (var k in toState.params) {
     f = f && (JSON.stringify(toParams[k]) == JSON.stringify(toState.params[k]));
   }
   if (f && localStorageService.get(toStateName) != null) {
     event.preventDefault();
     var savedToParams = localStorageService.get(toStateName); //retrieving toParams from local storage
     localStorageService.remove(toStateName);
     for (var k in toState.params) {
       toParams[k] = savedToParams[k]; //update only the params {} not url params
     }
     $state.transitionTo(toState,toParams);
   } else {
     var toSave = {};
     for (var k in toState.params) {
       toSave[k] = toParams[k]; //save only the params {} not url params
     }
     localStorageService.set(toStateName,toSave);
   }
  });

});

Gist

I try to use the localStorageService to 'cache' the params between state transitions.

when going from state A to state B , I remove the params previously stored for A.

I then check to see if the params that are being sent to B match the params in the state definition of B, and if they do match I load the params from the localStorage , because this means that the user has hit refresh and the params got reset.

I tested this code on a couple of cases , but it is still not fully tested.

Damn, is localStorage the only possibility? That or passing params in URLs? Is there any other way? — AlxVallejo, Jan 05 '16 at 20:20
As fat as I know there isn't , your app gets fully restarted when the user hits refresh, so, you lose your scope and factory/service data and the only way I know to preserve these data is in the localStorage. — Ahmed Fahmy, Jan 06 '16 at 14:44
This article discusses using $cookieStore for state on refresh. http://maffrigby.com/maintaining-session-info-in-angularjs-when-you-refresh-the-page/ — HungryArthur, May 19 '16 at 08:53
The solutions is good but has small problem. It gets stuck with the same state params forever. To prevent that use: $state.transitionTo(toState, _.extend(toParams, {stateChangeStart_reenter: true})); and do not save while reentering. — alehro, Jun 07 '16 at 16:20
@alehro can you post an answer with the code that you have mentioned — Sateesh Kumar Alli, Apr 12 '17 at 14:45

angularjs ui-router stateparams invisible loses on page refresh

1 Answers1

Linked