I have a web application (ASP.NET MVC3) which uses the jquery ui tab control with the cookie plugin (as demonstrated here).
I set the path of the cookie using the path option when the tab is created:
$("#tabs").tabs({ cookie: { path: '/A/' } });
In firefox this works correctly. No matter what the url is after "/A/" (ex "A/B/C") the tab control always correctly remembers which tab was last selected and switches to it when I re-load the page.
However, on Chrome (v21), occasionally the browser will add another tab cookie with a different path. I then end up with two cookies, one with the path "/A/" as I originally created, and another one with the path "/A/B/" which is the url I am currently on. Unfortunately, it seems that this "double cookie" causes the wrong tab to sometimes load when the page is refreshed, since the two cookies seem to conflict.
Is there any way to prevent this behaviour in chrome? I've tried several programatic solutions (such as forcing the path to "/A/" if the path contains "/A/", but as that code is never reached it seems chrome is doing it automatically).
Thanks for the help!
Seems the problem was that chrome doesn't differentiate between cookies with the same name on different paths; so the other tab control I had in my application was messing things up. Once I gave the cookie a unique name things started working properly!
For Google Chrome the default location for cookies is %LocalAppData%\Google\Chrome\User Data\Default\cookies. For Microsoft Edge Chromium this is %LocalAppData%\Microsoft\Edge\User Data\Default\cookies.
Cookies are stored on the user's machine. They can be modified in any way. In fact, the cookies can just be created on the fly and sent via several utilities for making HTTP requests. It isn't even a browser problem.
I've just pushed an example to the GitHub repository. Seems it's working well in my Chrome 21 under Linux.
Screenshot of first path
Screenshot of second path
If you're using jQuery UI >= 1.7 then add property "name" with some unique value like "my-absolutely-unique-cookie" to your cookie object you're passing and look how it goes:
$("#tabs").tabs({
cookie: {
name: 'my-unique-cookie',
// store cookie for a day, without, it would be a session cookie
expires: 1,
path: '/tabs'
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With