{"id":798,"date":"2015-03-26T22:02:25","date_gmt":"2015-03-26T16:02:25","guid":{"rendered":"http:\/\/promincproductions.com\/blog\/?p=798"},"modified":"2017-02-25T07:36:44","modified_gmt":"2017-02-25T01:36:44","slug":"set-cookie-expiration-date-browser-compatiability","status":"publish","type":"post","link":"https:\/\/promincproductions.com\/blog\/set-cookie-expiration-date-browser-compatiability\/","title":{"rendered":"Set Cookie Expiration Date &#8211; Browser compatiability"},"content":{"rendered":"<p>I was having an issue with the cookie expiration date not being set correctly for Internet Explorer 11 via Javascript. \u00a0I had found an older Javascript class for setting and modifying cookies that was available that I was using. \u00a0The class did not support sub-cookies however, so I added that functionality, as well as a few tweaks.<\/p>\n<figure id=\"attachment_800\" aria-describedby=\"caption-attachment-800\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/03\/set_get_cookies_using_jquery.jpg\" rel=\"attachment wp-att-800\" data-lasso-id=\"351\" data-rel=\"lightbox-gallery-UBxZ0I9t\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" class=\"size-full wp-image-800\" src=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/03\/set_get_cookies_using_jquery.jpg\" alt=\"cross-browser complaint expiration date on browser cookies\" width=\"310\" height=\"310\" srcset=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/03\/set_get_cookies_using_jquery.jpg 310w, https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/03\/set_get_cookies_using_jquery-150x150.jpg 150w\" sizes=\"(max-width: 310px) 100vw, 310px\" \/><\/a><figcaption id=\"caption-attachment-800\" class=\"wp-caption-text\">IE has different rules for how to set the expiration date on a cookie that the other browsers. But there is a simple way to make your cookies expiration date cross-browser compliant, even with the various versions of Internet Explorer!<\/figcaption><\/figure>\n<h2>Variable for setting a Cookies Expires Value<\/h2>\n<p>The bottom line is that I soon found that historically there have been two ways to set an expiration date in a cookie &#8211; expires or max-age.<\/p>\n<ul>\n<li>expires\n<ul>\n<li>UTC Date format expected<\/li>\n<li>Example:\n<ul>\n<li>Thu, 26 Mar 2015 15:26:23 GMT<\/li>\n<\/ul>\n<\/li>\n<li>Can be easily generated from a Javascript date object with the <a href=\"http:\/\/www.w3schools.com\/jsref\/jsref_toutcstring.asp\" target=\"_blank\" data-lasso-id=\"352\" rel=\"noopener\">toUTCString()<\/a> method\n<ul>\n<li>NOTE: Many other sources on the internet suggest using the toGMTString() method, however this is deprecated and is not advised to be used moving forward.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>max-age\n<ul>\n<li>EPOCH (or Unix time) is expected\n<ul>\n<li>Number of seconds since January 1st, 1970<\/li>\n<\/ul>\n<\/li>\n<li>Example:\n<ul>\n<li>1427383583165<\/li>\n<\/ul>\n<\/li>\n<li>When setting max-age for a cookie, set the amount of time until the cookie will expire, not the full EPOCH time from 1970.\n<ul>\n<li>Example:\n<ul>\n<li>Expire in 1 minute:\n<ul>\n<li>60 \u00a0 (60 seconds)<\/li>\n<\/ul>\n<\/li>\n<li>Expire in 1 day:\n<ul>\n<li>86400 \u00a0 (60 seconds * 60 minutes in an hour * 24 hours in a day)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>So which option is the correct option? \u00a0Sadly, the answer depends on which browser the visitor is\u00a0using. \u00a0<em><strong>max-age<\/strong><\/em> is the predominate option, however older versions of Internet Explorer (I believe it&#8217;s 8 and older) do not recognize this value and instead expect <em><strong>expires<\/strong> <\/em>to be set instead. That said, my testing at the time of writing this shows that IE11, Chrome, and FF will all accept either value. However, the best scenario for this is to simply set both. \u00a0This will cover your bases regardless of what browser your visitor uses. \u00a0It is my understanding that most browsers will look for the\u00a0<em><strong>max-age<\/strong><\/em> value first, and then fall back to\u00a0<em><strong>expires<\/strong><\/em> if needed.<\/p>\n<h2>Allowable Dates<\/h2>\n<p>There is a limitation on the max date allowed of January 19th, 2038 (at 03:14:07 to be precise) due to the 32bit time system built into servers (year 2038 bug). \u00a0For this reason, that is the max allowed date (at this time) that you should use when setting a future expiration date to ensure optimal browser compatibility. \u00a0In epoch time, the max translates to 2147483647.<\/p>\n<h2>Checking Cookie Values<\/h2>\n<h3>Chrome<\/h3>\n<p>EditThisCookies is the greatest browser plugin for this &#8211; simple, quick, easy, allows you to modify or delete cookies as needed. <a href=\"http:\/\/www.editthiscookie.com\/\" target=\"_blank\" data-lasso-id=\"353\" rel=\"noopener\">http:\/\/www.editthiscookie.com\/<\/a><\/p>\n<h3>Firefox<\/h3>\n<p>Firefox maybe the best browser for viewing cookies as they update in realtime as the cookie values change. \u00a0To view them however, you need to install Firebug. <a href=\"http:\/\/getfirebug.com\/\" target=\"_blank\" data-lasso-id=\"354\" rel=\"noopener\">http:\/\/getfirebug.com\/<\/a> Choose the\u00a0<strong>Cookies<\/strong> tab and watch all of the cookie info display and update. Alternatively, you can view cookies without Firebug by right clicking on a page and choosing\u00a0<strong>View Page Info<\/strong>. \u00a0Then choose the\u00a0<strong>Security<\/strong> tab, and the\u00a0<strong>View Cookies<\/strong> button.<\/p>\n<h3>Internet Explorer<\/h3>\n<p>Using IE11 got a bit easier, but still \u00a0not very friendly for working with cookies. You can use the Developer Tools for this though, but it&#8217;s still kluky and in my experience not always accurate regarding the expiration date. \u00a0The program listed below did help though.<\/p>\n<ul>\n<li>Open <strong>Developer Tools<\/strong><\/li>\n<li>Choose <b>Network<\/b> tab<\/li>\n<li>Click the green play button in the top left to start capturing data.<\/li>\n<li>Load your webpage to capture network data.<\/li>\n<li>Choose:\u00a0<strong>Network<\/strong> (tab) -&gt;\u00a0<strong>Details<\/strong> -&gt;\u00a0<strong>Cookies<\/strong> \u00a0This will list all of the cookies and their information for this webpage.\n<ul>\n<li>NOTE: If your cookie was set on this page load it will not display. \u00a0You will need to refresh the page again to view the cookie value.<\/li>\n<li>NOTE: You will need to &#8220;capture&#8221; network traffic by clicking the green triangle in the top left corner. \u00a0If &#8220;capture&#8221;mode is enabled, it will show a red square (stop sign).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>This program can be installed on your PC (worked on Windows 8 even though not listed as a supported OS on their site) that will allow you to view cookie values. \u00a0It has come in handy. <a href=\"http:\/\/www.nirsoft.net\/utils\/iecookies.html\" target=\"_blank\" data-lasso-id=\"355\" rel=\"noopener\">http:\/\/www.nirsoft.net\/utils\/iecookies.html<\/a><\/p>\n<h2>Javascript Cookies Class<\/h2>\n<p>I mentioned at the start of this article that I am using a Javascript class for cookie management &#8211; you can find a copy of that class on GitHub. <a title=\"Javascript Cookie SubCookie Management Class\" href=\"https:\/\/github.com\/PromInc\/js-cookie-class-with-subcookies\" target=\"_blank\" data-lasso-id=\"356\" rel=\"noopener\">https:\/\/github.com\/PromInc\/js-cookie-class-with-subcookies<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>I was having an issue with the cookie expiration date not being set correctly for Internet Explorer 11 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":800,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[12,5],"tags":[],"class_list":["post-798","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-jquery","category-website-development"],"jetpack_featured_media_url":"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2015\/03\/set_get_cookies_using_jquery.jpg","jetpack_shortlink":"https:\/\/wp.me\/p4BbcR-cS","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/comments?post=798"}],"version-history":[{"count":7,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/798\/revisions"}],"predecessor-version":[{"id":1464,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/798\/revisions\/1464"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media\/800"}],"wp:attachment":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media?parent=798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/categories?post=798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/tags?post=798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}