{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/2009/03/09/all-in-one-cookie-function/","result":{"data":{"markdownRemark":{"html":"

Users stumbling across jQuery may notice the API’s designed so a method’s behaviour varies depending on the number and type of arguments passed in a call (have a look at the jQuery method!). In the right hands, this flexibility produces clean and elegant code without burdening the developer with 101 new method names to learn.

\n

Let’s do the same for cookies (source: cookie.js).

\n

Three into one does go

\n

Googling for ’javascript cookie functions’ brings back Peter-Paul Koch’s trio of functions from QuirksMode. The functions are named setCookie, readCookie and eraseCookie. Browsing through the next few search-results we see the same thing going by different names: get, set and deleteCookie; add & remove, erase & delete, read, get and check - all variations on a theme, all separating functionality into a trio of functions.

\n

Let’s look at the method signatures:

\n\n

It’s pretty basic stuff.

\n

To merge the three functions into one, we have to differentiate between reading, writing and deleting a cookie by the number and value of arguments; I’ve chosen an implementation where deleting a cookie is achieved by setting it to null.

\n

Here’s some example usage:

\n
// create a cookie:\ncookie("name", "value");\n// read it:\nalert(cookie("name"));\n// erase it:\ncookie("name", null);
\n

Flexibility

\n

All those cookie calls pass at least one parameter… but isn’t there something useful we can do with a plain parameterless cookie() call? Of course there is - let’s return an associative array of all cookie values!

\n

By default (without specifying an explicit expiry time) cookies survive until you restart the browser. It’s kinda mandatory to provide some way of specifying an expiry time.

\n

We’ll accept an optional third parameter specifying an expiry time in days:

\n
// create cookie for 1 year\ncookie("theme", "minimal", 365);\n// grab all cookies:\nvar cookies = cookie();\nalert(cookies.theme);
\n

Looking good so far. But there’s more.

\n

Like several of the cookie libraries, our function defaults to setting cookies on the top-level path ”/” - this is a more common requirement than the browsers default behaviour, which sets a cookie so it’s only used at or below the current page level (i.e. a cookie set while looking at “/products/Nintendo-DSi-Console_Black/978372” wouldn’t be available when looking at any other product.)

\n

To give developers flexibility I’ve made path another optional parameter - it could be used to share cookies between “/product/*” pages, but withhold them from any other area of a site.

\n

While we’re on the subject of sharing - what about cross-domain cookies? Cookies are naturally assigned to the domain the page is being viewed on, but sometimes we want to make sure a cookie’s available to all sub-domains too. domain is also an optional parameter.

\n

Having both path and domain as optional parameters could be confusing - after all, they’re both strings. Fortunately, we know paths begin with ”/” and domains don’t - and if you want to specify both you just stick to the right order: path then domain:

\n
// share cookie between product pages:\ncookie("view-description", "hidden", "/products");\n// share cookie between domains:\ncookie("id", "_", ".ewelike.com");\n// save preferences cross-domain for 1 year:\ncookie("prefs", "_", 365, "/products", ".ewelike.com");
\n

Finally, there’s an optional ‘secure’ parameter. I’ve never used this myself, but it’s there if you want it. It’s handy if you’re storing sensitive information in cookies and you only want to allow the browser to transfer the cookie value when it’s request pages via https. The code will take any truthy value hanging off the end of the parameters (anything that’s not been interpreted as expiry date, path or domain.):

\n
// set a secure cookie on the default path and domain\n// (expires when the browser closes)\ncookie("name", "value", true);
\n

Want the code? Grab it now… download cookie.js (dual-licensed under MIT and GPL, exactly the same as jQuery)

\n","timeToRead":3,"frontmatter":{"title":"All-in-one cookie function","blurb":"Presenting a single overloaded function to get, set or delete cookies","date":"2009-03-09T11:18:06.000Z","modified":"2011-01-03T17:20:13.000Z"}}},"pageContext":{"slug":"/blog/2009/03/09/all-in-one-cookie-function/","next":{"fields":{"slug":"/blog/2009/12/03/javascript-date-to-time/"},"frontmatter":{"title":"JavaScript Date to Time"}},"previous":{"fields":{"slug":"/blog/2009/02/23/macbook-pro-not-so-bad/"},"frontmatter":{"title":"The MacBook Pro’s not so bad..."}}}},"staticQueryHashes":["1192980692"]}