How to achieve state persistance on tab reload?

Question

Simplified Use case

I have a working single page web app called data_store. This app has 2 simple tasks list

1. List users
2. Show user details (when a user is clicked).

Now for this, I have 2 routes

1. data_store/all_user
2. data_store/user_detail

*For the sake of simplicity, all other factors can be ignored.

---

Problem: When I reload the tab my at data_store/user_detail, I loose on the unique ID of the user whose details were to be shown.

Question: How can I persist the unique ID on tab reload? and make it work seamlessly across duplicated tabs?

---

Failed Solutions

1st, use data_store/user_detail/<UUID> format but I cannot expose it in my URL for security reasons.

2nd, use local_storage to store current UUID, but then the reload of other tabs with different user's details breaks. Reason: as they pick up the last set value by any other tab also.

3rd, use session_storage but the problem is that while duplicating tabs instead of opening a new one. The chrome to duplicate a tab uses the window.open and generates a daughter tab that shares all the info from its parent, including sessionStorage.

Answer 1

I think you can put the user's crypted identifier in the URL, If you encryption is based on a seed then it should be possible to encrypt/decrypt it, and make it unavailable for some basic hacker.

I have found this thread refering to a low level of encryption, maybe it can help you.

For a Higher encryption level, crypto-js could be a solution.

Now, if you don't want parameters in your url and don't need to support IE < edge 14, maybe you can try to get the tab id and store your data with it, so on reload it will be easy to associate data with tabs. I don't know its behavior with tab duplication tho.