像cookie这样的全局变量，在回发后仍保留值，但应为不同的实例（选项卡/窗口）保存不同的值

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

If I am understanding your question correctly, the easiest way would be to use AJAX postbacks to populate your targetDiv field rather than reloading the page each time. Then you would only be loading the relevant part of the page, so that you could have as many tabs open at once as you wanted without them interfering with each other.

MVC3 offers a lot of support for AJAX requests - just put the stuff that draws the grid in a partial view and it will be easy to change it when the user selects different options.

To help maintain state across AJAX requests you can just store it in a form field and pass the value in when you make your request - there are a few different ways to do this, either using an AjaxForm and submitting it with the request or adding the parameters to the request with JQuery depending on how you choose to implement your form. You could store the current CategoryId as a hidden field and just add it into the request as it is created. If you have more than one category open on a single page, either a list of hidden fields with the same name to behave like a checkbox group or encoding a list in your hidden field should do the trick.

Answer 2

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 .