Categories:
Partners

Determining JavaScript cookie support in client's browser

If your script relies on JavaScript cookies to persist and store information for retrieval later, it's good practice to always make sure that the user's browser supports cookies first. This includes whether the browser has cookies enabled (an option in most browsers). Depending on your situation you can then either remind the user to enable cookies, or create code to handle these cases silently.

So, to answer this common question, use the following technique to detect whether the client's browser has cookies enabled: 

<script type="text/javascript">
var cookieEnabled=(navigator.cookieEnabled)? true : false

//if not IE4+ nor NS6+
if (typeof navigator.cookieEnabled=="undefined" && !cookieEnabled){ 
document.cookie="testcookie"
cookieEnabled=(document.cookie.indexOf("testcookie")!=-1)? true : false
}

//if (cookieEnabled) //if cookies are enabled on client's browser
//do whatever

</script>

The above script is actually two techniques rolled into one:

  • Firstly, we use the official property for the task, navigator.cookieEnabled, to help determine whether the browser has cookies enabled. However, we immediately run into a limitation- this property is supported only in IE4+ and NS6+. So, in both cases where the property returns false or does not exist (in other browsers), we set the variable cookieEnabled to false instead for continued investigation.
  • Moving on, it's now time to probe all other browsers for cookie availability. The age-old "give it a try" technique works nicely. By setting a dummy value to document.cookie and immediately probing it to see if the value is retained, we can tell if cookies is enabled on the client's end.

The variable cookieEnabled now contains a Boolean value indicating the client's cookie support. Nice and crunchy!