Hide query params in the URL - Angular 5

Question

I am setting dynamic queryparams when navigating to a different route.

this.router.navigate(["/listing/list"], {
        queryParams: queryParams,
        skipLocationChange: true
      });
history.pushState(queryParams, "", "/listing/list");

And as I don't want the user to know query params I am using skipLocationChange and manually change the history using history.pushstate. Now I am able to receive the params when back clicked and returned back to the same page using browser back/forward buttons from popstate event. But parameter state is erased reloaded. Is there a way to persist query params while reloading the browser?

The user can hit F12 and look in the network tab to see the parms. You can persist them in localStorage or sessionSstorage — mplungjan
Anything that you send to the client, the user can see if they know where to look. If you want something to be secret, don't send it. — Joe Clay
if we reload shared service data will not be persisted right ? — k harish
Data will be deleted but you can create an store data on your server to synchronize on this kind of situations. All this if you can't use local storage or Session Storage. — Carlos E

G.Vitelli G.Vitelli · Accepted Answer · 2018-01-29T15:04:15

You can use LocalStorage or SessionStorage persist the data in the browser

sessionStorage if the browser will be closed the data will be gone.
LocalStorage the data will exist after browser closing and reopening, will never expire.

Caution with the Dev Tools you can explore the stored data, maybe you can use base64 or use a strong encryption algorithm for obfuscating the information.

Hide query params in the URL - Angular 5

1 Answers