Refreshing page removes non-URL $stateParam (ui-router)

Question

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?

score 2 · Answer 1 · answered May 08 '18 at 15:31

URLs in a SPA are meant for managing the UI state, i.e.: which components to display and with which info (ex. detail component with id). The router resolves the state from this. A good example is to think of the url as something to be sent by email (or whatever) to someone else and expect for their router to resolve the state. So, briefly put I would say no to your question.

Your problem is that you want to persist state of the application that is specific to the browser session, right? Browsers are equipped with mechanisms for that and I'd recommend taking a look into local storage or session storage to solve your problem and retrieve the info you need on the resolve method in your state declaration.

score 1 · Accepted Answer · answered May 08 '18 at 15:22

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.

Ah yeah thats a good point, I should probably just make it part of the url — bradimus, May 08 '18 at 15:49

Refreshing page removes non-URL $stateParam (ui-router)

2 Answers2