Issue
Im using UI-Router in my application and I have a state parameter where it doesn’t really make sense for it to be part of the url. According to the documentation I am creating the parameter without specifying it in the state url, as such:
.state('contact', {
url: "/:contactId/contact",
params: {
otherParam: null
},
templateUrl: 'contacts.html'
})
This works as intended, but I noticed that if I manually refresh the page, the parameter gets reset to the default null.
For example, if I redirect to the state as such:
$state.go('contact', {contactId: 42, otherParam: 11});
Everything works as expected ($stateParams.contactId
is 42, $stateParams.otherParam
is 11)
However, once I refresh the page, $stateParams.contactId
is still 42, but $stateParams.otherParam
has been set back to null
. Is it possible to persist this non-URL parameter across a browser refresh?
Solution
It’s sort of possible, but you shouldn’t do it. If it is something that should persist on refresh, that means that by definition it SHOULD be in the URL, since you expect it to be a component of the resource.
If you really really want to break convention and do this, you’ll need to do something that saves the data in window.name
and retrieves it on reload. This is definitely an anti-pattern, and anyone could get access to that data, but like I said, it’s possible.
Answered By – Dan Crews
Answer Checked By – Cary Denson (AngularFixing Admin)