Html – Cookies and multiple browser windows/tabs

cookieshtmljqueryjquery-cookie

I'm trying to share some information between browser windows/tabs, and I'm leery of HTML5 local storage because of browser support issues. Some googling lead me to believe cookies can be used for this, so I grabbed jquery.cookie and set up a simple test.

Two pages which write a cookie when loaded:

$.cookie("testValue", new Date().getTime());

and a button that displays the cookie value in an alert on each:

alert($.cookie("testValue"));

When testing, I see different values on each page, which would lead me to believe this just doesn't work, but I keep running across posts here and elsewhere where people seem to be recommending it, so I'm wondering if I'm just doing something wrong?

Best Answer

Cookies are only updated in the JavaScript environment when set by JS, or when the page loads.

localStorage was designed for this. IE8 supports it just fine, it's only the really old IE7 and below that don't. Although IE9 is Windows-Vista-and-7-only, IE8 is fine on XP so you should have no troubles asking your users who are still on archaic browsers to update.

(I can't say this enough, but IE really need an auto-updater like all other browsers...)

Related Solutions

Html – How to disable browser autocomplete on web form field / input tags

Firefox 30 ignores autocomplete="off" for passwords, opting to prompt the user instead whether the password should be stored on the client. Note the following commentary from May 5, 2014:

The password manager always prompts if it wants to save a password. Passwords are not saved without permission from the user.

We are the third browser to implement this change, after IE and Chrome.

According to the Mozilla Developer Network documentation, the Boolean form element attribute autocomplete prevents form data from being cached in older browsers.

<input type="text" name="foo" autocomplete="off" />

Html – Set cellpadding and cellspacing in CSS

Basics

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

Best Answer

Related Solutions

Html – How to disable browser autocomplete on web form field / input tags

Html – Set cellpadding and cellspacing in CSS

Related Topic