Question

This is an MVC3 web application. In the _Layout.cshtml shared view, there is a left-nav tree for loading pages on the right of the left-nav. On every tree list item click, it will refresh the page to load the appropriate page with the same Layout view.

In this _Layout.cshtml, there is a Select Category link and an empty div (targetDiv) below the tree. Select Category link will open a jQuery UI modal dialog with a webgrid and shows all the ‘categories’. On clicking on any ‘category’ link in the table, the dialog will close and targetDiv will be reloaded by AJAX, so that a webgrid inside targetDiv populates all the ‘books’ in this ‘category’.

And if an user clicks on any left-nav item, the whole page reloads. So I need to retain the ‘books’ list of the selected ‘categories’. For this, I save a cookie (CategoryId) when a ‘category’ is selected in modal dialog. On page reload (document ready) I’m using this cookie in _Layout page which again populates all the ‘books’ in this ‘category’.

This is working fine, but the new requirement is to allow working on multiple ‘Categories’. If I select ‘Category 1’ in one tab of a browser and get all books by this category, in the next tab (another instance of same app), I should be able to work on a different ‘Category’ and so different collection of books. In this case, I cannot use cookie because cookie is shared across all the tabs.

How will I set different ‘Categories’ on different instances (browser tabs/window)?

Answer 1

I’ve solved this problem. I’ve used Cookie-less Session Variables in JavaScript. It basically stores your data in the window.name property which does not get cleared when you reload the page. And every tab has a different window object (this is what I want) and is supported in all major browsers.

This is just like session cookies, only difference is this data won’t survive between windows/tabs which normal session cookies does.

Also see Session variables without cookies.