How to Set Cookies With JavaScript

Cookies are small bits of information stored on your computer by the websites you visit. Cookies are used to store information about users, such as their name or the date of their last visit to a website. In addition, a website may alter its design, based on the preferences stored in cookies. Cookies are integrated into the Document Object Model, so you can set cookies for visitors to your website using JavaScript.

Instructions

1. Place the following code between the "head" tags of your HTML document:

   <script type="text/javascript">

   function addCookie(ref,cookie,lifetime) {

   var expDate = new Date();

   expDate.setTime(expDate.getTime()+lifetime*86400000);

   document.cookie = ref+"="+cookie+"; expires="+expDate.toUTCString();

   }

   </script>

   Every cookie has a reference name, cookie value, and lifetime. These are the parameters passed to the "addCookie" function. The expiration date is calculated by adding the lifetime to the current date, and it is converted to the UTC format. The final line of the function concatenates the parameters of the cookie into the format required by the "document.cookie" object, and assigns it to that object to create the cookie.

2. Add the following line just before the "</script>" tag to invoke the "addCookie" function when the page loads:

   document.onload = addCookie("TestCookie",10,7);

   This cookie simply stores the number 10, and it is set to expire after a week of seven days.

3. Invoke "addCookie" from a button in the body of your document to store data that the user inputs. Add the following code to the body of your HTML document:

   <form>

   <input type="text" id="cookievalue" />

   <input type="button" value="Store text in cookie" onClick="addCookie('textCookie',document.getElementById('cookievalue').value,7);" />

   </form>

   This cookie stores the text input by the user when the button is clicked, and it is also set to expire after a week.

4. Add domain information to the final line of "addCookie" if you need to specify the subdomain(s) of your website where the cookie will be valid. For example, the following line ensures that pages on any subdomain of "example.com" will have access to the cookie:

   document.cookie = ref+"="+cookie+"; expires="+expDate.toUTCString()+"; domain='.example.com'";

   You may not set a domain for a cookie other than the one your script resides on.

5. Change the "path" parameter in the final line of "addCookie" to restrict the cookie's use to a certain subdirectory of your domain. For example, this cookie will only be available to pages in the "content" subdirectory:

   document.cookie = ref+"="+cookie+"; expires="+expDate.toUTCString()+"; path=/content/";

   This cookie should only be created by pages residing in the "content" directory.

6. Add "secure" to the cookie's definition to restrict the use of the cookie to secure connections (HTTPS). This is appropriate for private user information. Here is an example:

   document.cookie = ref+"="+cookie+"; expires="+expDate.toUTCString()+"; secure";

Tips & Warnings

• Web browsers allow users to prevent websites from storing cookies, so do not rely on cookies for your website's functionality.

• If your website stores another cookie with the same name, the previous one will be overwritten.

• Use string functions to parse the "document.cookie" object to read cookies you've set in the past.

References

• Mozilla Developer Network: document.cookie

Resources

• QuirksMode: Cookies; Scott Andrew and Peter-Paul Koch