Javascript – Hide query params in the URL – Angular 5

angularjavascript

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?

Best Answer

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.