java - How can I store state for an individual browser tab/window?

Question

I'm developing a single page jQuery & Backbone.js web app. The backend is a JBoss 6 application server.

Until now we had the following structure:

• There is only one servlet (front controller). Every request from the JavaScript client goes through here.
• In the servlet - at the first request of a certain JS client - I make a look p to a stateful session bean. For the next requests of this client, I store the result of the look up in an HTTP session container. So every JS client has exactly one stateful session bean. This connection is kept by a session cookie.

Now I have an additional requirement:

When the user has two browser tabs (in one browser), they should have two isolated instances of the web app in every browser tab. Because of that I have a problem with session cookies because this session cookie is for all browser tabs.

I have to change the structure so that:

• The servlet has to generate a new session ID for the first request of a certain JS client. This session ID is communicated to the client.
• With every POST to the backend the JS client has to send this session ID.

My question is:

Until now I saved the result of the look up in an HTTP Session object and I hadn't to think about generating a session ID. But now I have to store this somewhere else, where?

Has anybody experience with this kind of setting and can help me?

Update:
Thank you BalusC for this very interesting approach.
When I understood you well, this means:

All individual JS clients of the tabs of one browser share one HTTP session object. And in this HTTP session object, every tab has its own entry point. That sounds really good. So I still can use the whole HTTP session infrastructure and don't have to reinvent the wheel.

Answer 1

Autogenerate an unique value on the initial GET request which you store and pass around on every subsequent postback as a hidden input value. Use this unique value as identifier of the session attribute representing the view-scoped data.

During the 1st request on a brand new session, do:

Map<String, ViewData> viewScope = new HashMap<String, ViewData>();
session.setAttribute("viewScope", viewScope);

(the ViewData represents the view-specific data you'd like to track across postbacks on the same view)

During every GET request, do:

String viewDataId = UUID.randomUUID().toString();
viewScope.put(viewDataId, new ViewData());
request.setAttribute("viewDataId", viewDataId);

During generating the HTML, do:

<input type="hidden" name="viewDataId" value="${viewDataId}" />

During every POST request, do:

ViewData viewData = viewScope.get(request.getParameter("viewDataId"));
// Get/set view-specific data in there.

Make sure that jQuery also passes this hidden input around (which shouldn't be a big problem if you already properly use $(form).serialize() or e.g. AjaxForm plugin to ajaxify the forms).

If you're familiar with Java EE's MVC framework JSF, then it may be useful to know that its @ViewScoped annotation works roughly the same as described above. See also a.o. How to choose the right bean scope?