StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCookie is set twice; how to remove the duplicate?
text
Body
copied!<p>So I have a website that uses a cookie to remember the current layout state across visits. Everything was working great until I added a Facebook 'Like' button to the site which generates links that allow users to share a certain UI state (a little confusing but not really relevant to the problem). </p> <p>The problem is that when I visit the site via one of these Facebook links a second copy of my layout cookie seems to be created (as in, I see two cookies with the same name and different values). This wouldn't be too terrible except that the value of the duplicate cookie appears to be stuck, coupled with the fact that when the user returns to the site the browser remembers the stuck value instead of the most recently set value (so it's kind of like there's a "good" cookie that I can still work with, and a "bad" one which I cannot, and the browser likes to remember the "bad" cookie instead of the "good" cookie). This breaks my layout tracking/remembering functionality. </p> <p>So there are two questions here:</p> <ol> <li>How do I stop this from happening/why is this happening in the first place?</li> <li>How do I fix things for any users that already have a stuck cookie (I know I could just pick a new name for the cookie, but I'd rather do it by finding a way to properly unstick the stuck cookie)?</li> </ol> <p>If I use Chrome's developer console after visiting the page in a stuck state, I can see that <code>document.cookie</code> is (formatting added for readability):</p> <pre><code>layoutState=[{'id':6,'x':8,'y':1525,'z':4,'url':'undefined'}, {'id':1,'x':625,'y':709,'z':2,'url':'undefined'}, {'id':2,'x':8,'y':37,'z':3,'url':'undefined'}, {'id':3,'x':625,'y':1179,'z':5,'url':'undefined'}, {'id':4,'x':626,'y':37,'z':1,'url':'undefined'}, {'id':5,'x':626,'y':357,'z':1000000,'url':'http://m.xkcd.com/303/'}]; WibiyaNotification1=1; WibiyaNotification213286=213286; WibiyaNotification213289=213289; wibiya756904_unique_user=1; JSESSIONID=DONTHIJACKMEPLEASE; WibiyaProfile={"toolbar":{"stat":"Max"},"apps":{"openApps":{}},"connectUserNetworks":[null,null,null,null,null,null]}; WibiyaLoads=59; layoutState=[{'id':6,'x':8,'y':1525,'z':4,'url':'undefined'}, {'id':1,'x':625,'y':709,'z':2,'url':'undefined'}, {'id':2,'x':8,'y':37,'z':3,'url':'undefined'}, {'id':3,'x':625,'y':1179,'z':5,'url':'undefined'}, {'id':4,'x':626,'y':37,'z':1,'url':'undefined'}, {'id':5,'x':626,'y':357,'z':6,'url':'http://m.xkcd.com/303/'}]" </code></pre> <p>Ignore the Wibiya cookies and the JSESSIONID. The stuck cookie is the first 'layoutState' instance, and the one that I can still manipulate in JavaScript is the second 'layoutState' instance. Here is what I get if I change some things around:</p> <pre><code>layoutState=[{'id':6,'x':8,'y':1525,'z':4,'url':'undefined'}, {'id':1,'x':625,'y':709,'z':2,'url':'undefined'}, {'id':2,'x':8,'y':37,'z':3,'url':'undefined'}, {'id':3,'x':625,'y':1179,'z':5,'url':'undefined'}, {'id':4,'x':626,'y':37,'z':1,'url':'undefined'}, {'id':5,'x':626,'y':357,'z':1000000,'url':'http://m.xkcd.com/303/'}]; WibiyaNotification1=1; WibiyaNotification213286=213286; WibiyaNotification213289=213289; wibiya756904_unique_user=1; JSESSIONID=DONTHIJACKMEPLEASE; WibiyaProfile={"toolbar":{"stat":"Max"},"apps":{"openApps":{}},"connectUserNetworks":[null,null,null,null,null,null]}; WibiyaLoads=59; layoutState=[{'id':1,'x':8,'y':39,'z':1000000,'url':'undefined'}] </code></pre> <p>The second 'layoutState' has the correct information that I want the browser to remember. However what the browser actually remembers is the value of the first instance. </p> <p>I've tried unsetting the cookie entirely, which causes the second instance to disappear, but nothing I do seems to get rid of the first instance. I get the same behavior in all major browsers (Chrome, Firefox, IE), which makes me suspect that I must be doing something fundamentally wrong here, but I'm not sure what it is.</p> <p>You can view the site itself <a href="http://webcomix.no-ip.org">here</a>. Or <a href="http://webcomix.no-ip.org/?id=5&url=http://m.xkcd.com/303/">click here</a> to access it via a Facebook link (should generate a stuck cookie). Any help is much appreciated.</p> <p><strong>Update:</strong></p> <p>So the steps to reliably reproduce the error are as follows:</p> <ol> <li>Visit the site via the <a href="http://webcomix.no-ip.org/?id=5&url=http://m.xkcd.com/303/">Facebook-style link</a></li> <li>Make some changes to the layout, and then close the tab.</li> <li>Visit the site via the <a href="http://webcomix.no-ip.org">normal URL</a>.</li> <li>Your layout from the initial visit should be correctly remembered, so change some things around and then refresh the page. When the page reloads, your changes will no longer be remembered.</li> </ol> <p>I've also noticed that revisiting the site via the Facebook-style URL is able to clear/reset the stuck cookie. So it's like the browser is keeping a separate cookie for each URL path, or something, and not allowing the root page to access the cookie that was set on the other URL path. I thought I might be able to fix this by explicitly setting <code>path=/</code> on the cookie, but no dice.</p> <p><strong>Update 2:</strong></p> <p>I've found that if I set both the path and the domain of the cookie I get different behavior in all browsers:</p> <ol> <li>Firefox - <s>Works correctly now, hooray!</s> Worked correctly once, then broke, boo!</li> <li>Chrome - No change</li> <li>IE - Seems to be keeping separate cookies for each URL, so the Facebook-style URL remembers one state, and the standard URL remembers a different state. Both update correctly and independently of each other. This is kind of funky, but still way better than the stuck/broken state. </li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload