Read cookies with JavaScript

Question

I know how to write/create cookies in JavaScript.........................................................

//Create the cookies
document.cookie = "Name=" + Name + ";expires=Friday, 31-Dec-2011 12:00:00 GMT; path=/";
document.cookie = "Surname=" + Surname + ";expires=Friday, 31-Dec-2011 12:00:00 GMT; path=/";
document.cookie = "Number=" + Number + ";expires=Friday, 31-Dec-2011 12:00:00 GMT; path=/";
document.cookie = "Email=" + Email + ";expires=Friday, 31-Dec-2011 12:00:00 GMT; path=/";
document.cookie = "Country=" + Country + ";expires=Friday, 31-Dec-2011 12:00:00 GMT; path=/";
document.cookie = "Company=" + Company + ";expires=Friday, 31-Dec-2011 12:00:00 GMT; path=/";
document.cookie = "Title=" + Job + ";expires=Friday, 31-Dec-2011 12:00:00 GMT; path=/";

But how can I read each one of them in JavaScript because I want to populate the text boxes next time the user come to the form?

I have tried this but it does not work:

var cookieName = ReadCookie("Name");
document.getElementById('txtName').value = cookieName;

Edit with Answer:

I used this code....................................

<script type="text/javascript">

function getCookie(c_name)
{
  if (document.cookie.length>0)
  {
      c_start=document.cookie.indexOf(c_name + "=");
      if (c_start!=-1)
        {
        c_start=c_start + c_name.length+1;
        c_end=document.cookie.indexOf(";",c_start);
        if (c_end==-1) c_end=document.cookie.length;
        return unescape(document.cookie.substring(c_start,c_end));
        }
     }
     return "";
 }

function checkCookie()
{
    Name = getCookie('Name');
    Surname = getCookie('Surname');
    Email = getCookie('Email');
    Company = getCookie('Company');
    Title = getCookie('Title');

    if (Email!=null && Email!="")
      {
      //Populate the text boxes..................................
      document.FormName.txtName.value = Name;
      document.FormName.txtSurname.value = Surname;
      document.FormName.txtEmail.value = Email;
      document.FormName.txtCompany.value = Company;
      document.FormName.txtjob.value = Title;
      }
   }

</script>

And called the checkCookie() function like so from the window.onload

<SCRIPT TYPE='text/javascript' LANGUAGE='JavaScript'><!--    //

window.onload = initPage;

function initPage() 
{
    checkCookie();

}

//-->

Enjoy!!

Eh, quirksmode is okay... but a bit verbose with all the substring'ing -- try http://leaverou.me/2009/12/reading-cookies-the-regular-expression-way/ — James, May 25 '10 at 14:13

score 2 · Accepted Answer · answered May 25 '10 at 13:42

From http://w3schools.com/js/js_cookies.asp

set cookie

function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
}

get cookie

function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1;
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    }
  }
return "";
}

score 1 · Answer 2 · answered Jul 08 '13 at 08:20

These are much *much* better references than w3schools (the most awful web reference ever made):

Examples derived from these references:

// sets the cookie cookie1
document.cookie =
 'cookie1=test; expires=Fri, 3 Aug 2001 20:47:11 UTC; path=/'

// sets the cookie cookie2 (cookie1 is *not* overwritten)
document.cookie =
 'cookie2=test; expires=Fri, 3 Aug 2001 20:47:11 UTC; path=/'

// remove cookie2
document.cookie = 'cookie2=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/'

The mozilla reference even has a nice cookie library you can use.

Pointy · Answer 3 · 2010-05-25T18:17:16.533

0

Referring to document.cookie gets you the whole string of cookies. They're separated by semicolons.

var cookies = document.cookie.split(';'); // "cookies" will be an array

You could then make that an object with name->value mapping:

var cookieMap = {};
for (var i = 0; i < cookies.length; ++i) {
  cookies[i].replace(/^\s*([^=]+)=(.*)$/, function(_, name, val) {
    cookieMap[name] = unescape(val);
  });
}

Now you can look at a cookie "mycookie" like this:

var mycookieVal = cookieMap.mycookie;

note this is been edited since its initial broken version - still the same idea but not it should actually work. The idea is that the loop takes each of the parts of document.cookie that were separated by semicolons, and then further splits each of those into a name part (stuff before the "=", except leading spaces) and a "value" part (stuff after the "=" to the end of the cookie part). The value is then stored in the "cookieMap" under the given name.

edited May 25 '10 at 18:17

answered May 25 '10 at 13:41

Pointy

405,095
59
585
614

Cool, but how do I get an individual one? – Etienne May 25 '10 at 13:44
I just extended my answer - there are other suggestions in other answers too, like functions to return specific cookies without having to build a map. – Pointy May 25 '10 at 13:45
var mycookieVal = cookieMap.Name; Correct? – Etienne May 25 '10 at 13:54
Yes but in my example the name of the cookie is "mycookie". Sorry about all the errors in my original; it should be all fixed now. I'm not sure whether you need the "unescape" that's in another one of the answers. – Pointy May 25 '10 at 13:56
I'll do some more work on my answer; this is a simple problem but I've made a mess for myself (and for you!). – Pointy May 25 '10 at 18:06
MMMM, the value "name" in your code is my cookie name correct that I am looking for? This does not work for me still......... – Etienne May 26 '10 at 06:55

Read cookies with JavaScript

3 Answers3

Linked

Related