Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: Cookies

  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    32
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Cookies

    Hello,

    I know there are dozens of threads on this topic but I can't figure out how to do what I want to do.

    I have three variables I want to store in a cookie when a user leaves this page which is a college project: http://jimbolgs.agilityhoster.com/wo.../ClockUTC.html

    They are (from the linked JS file): extraMins, geoLoc, UTCHours.

    I would also like to retrieve them on return to the page.

    Any help appreciated, Thanks.

  • #2
    New Coder
    Join Date
    Aug 2009
    Location
    Dirty Jersey
    Posts
    30
    Thanks
    0
    Thanked 2 Times in 2 Posts
    here's a well designed tutorial: http://www.elated.com/articles/javascript-and-cookies/

    the tutorial explains the syntax and each argument in detail. you can't fail if you follow it.

    to set a basic cookie, you just use code formatted thusly:

    Code:
    document.cookie = "name=value; expires=date;
    by changing the "name", you can set multiple cookies. so for instance, if i typed:

    Code:
    document.cookie = "cookie1=some data; expires=Thu, 2 Aug 2012 20:47:11 UTC"
    document.cookie = "cookie2=more data; expires=Thu, 2 Aug 2012 20:47:11 UTC"
    i would get two cookies that i could call. there's more properties and parameters you can set for cookies, but the tutorial covers all that.

    so if you want to retrieve a cookie, you just set some variable to "document.cookie":

    Code:
    var x = document.cookie
    variable "x" will then get a STRING value which gives you a name/value pair, something like:

    Code:
    bblastvisit=1325358324; bblastactivity=0; cookie1=some data; popunder=yes; popundr=yes; setover18=1
    the tutorial i linked has an excellent snippet for parsing out a specific value from a given cookie name, using the following function:

    Code:
    function get_cookie ( cookie_name )
    {
      var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
    
      if ( results )
        return ( unescape ( results[2] ) );
      else
        return null;
    }
    after that, you can do whatever you want with the value.

    i would suggest using firefox to learn how to manipulate cookies. if you press "Control + Shift + K", it brings up the "web console" where you can enter javascript directly into the field and test to your hearts content.

    once you can set and verify cookies, then start screwing around with retrieving them. it's simple. the second the page loads, it looks for a cookie, and if found, stores the contents into the "document.cookie" property. all you do is request the information and then act on whatever is in the request.

  • Users who have thanked TooCrooked for this post:

    Jimbolgs (03-04-2012)

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    32
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Thanks for that. I'll have a good go at it tomorrow.

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Jimbolgs View Post
    Thanks for that. I'll have a good go at it tomorrow.
    I would suggest that you challenge yourself further by storing all your data in just one cookie, using a format that facilitates separating it upon retrieval.

  • Users who have thanked Logic Ali for this post:

    Jimbolgs (03-06-2012)

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by TooCrooked View Post
    the tutorial i linked has an excellent snippet for parsing out a specific value from a given cookie name, using the following function:

    Code:
    function get_cookie ( cookie_name )
    {
      var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );
    
      if ( results )
        return ( unescape ( results[2] ) );
      else
        return null;
    }
    after that, you can do whatever you want with the value.

    Not quite excellent since it uses the long deprecated unescape() call instead of the decodeURIComponent() call that relplaced it many years ago.

    The difference between the two is that unescape only supports the first 127 characters in the ASCII characterset whereas decodeURIComponent can handle the first 65535 unicode characters.

    If they made that one update to bring it into the 21st Century then it would be excellent.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    New Coder
    Join Date
    Nov 2011
    Posts
    32
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Okay, I think I'm nearly there. My cookies are set and I can retrieve the string, but I'm struggling to parse it.

    Does anyone know what I'm doing wrong?

    This is the function I’m using to set the cookies:
    Code:
    function setCookies() {
    	var cookieStringHours = ("hours=" + zoneHours + ";" + "expires=15/08/2012 00:00:00; path=/");
    	document.cookie = cookieStringHours;
    	var cookieStringMins = ("mins=" + zoneMins + ";" + "expires=15/08/2012 00:00:00; path=/");
    	document.cookie = cookieStringMins;
    	var cookieStringLocation = ("location=" + geoLoc + ";" + "expires=15/08/2012 00:00:00; path=/");
    	document.cookie = cookieStringLocation;
    	var cookieStringTab = ("tab=" + currentTab + ";" + "expires=15/08/2012 00:00:00; path=/");
    	document.cookie = cookieStringTab;
    }

    This is the code I’m using to check the cookie has worked:
    It returns a string like this: hours=-8; mins=0; location=Vancouver; tab=clock
    Code:
    function getCookies() {
    	var docCookie = document.cookie;
    	alert (docCookie);
    }

    Finally, this is the code I’m trying to use to parse the location from the string:
    It returns a string like this: ; location=Vancouver;,;,Vancouver,;
    Code:
    function get_cookie(location)
    {
    var results = document.cookie.match ( '(^|;) ?' + "location" + '=([^;]*)(;|$)' );
    document.write (results);
    if ( results )
    return ( unescape ( results[2] ) );
    else
    return null;
    }
    Click here for a live version.
    Last edited by Jimbolgs; 03-05-2012 at 09:00 PM.

  • #7
    New Coder
    Join Date
    Aug 2009
    Location
    Dirty Jersey
    Posts
    30
    Thanks
    0
    Thanked 2 Times in 2 Posts
    first, this is unnecessary:

    Code:
    function getCookies() {
    	var docCookie = document.cookie;
    	alert (docCookie);
    }
    just do:

    Code:
    function getCookies() {
    	alert(document.cookie)
    }
    this isn't just to say "you did it wrong", it's to show you how to avoid writing in useless statements. if you're going to create variable for the cookie information, it should be because you need to use the variable in multiple places. you throw that variable away after that function finishes, and you only use it once. also, if you only call getCookies once, get rid of the function declaration and just use "alert("document.cookie")" for your debugging.

    that aside,

    Code:
    function get_cookie(location)
    {
      var results = document.cookie.match ( '(^|;) ?' + "location" + '=([^;]*)(;|$)' );
    
    alert (results);
    
      if ( results )
        return ( unescape ( results[2] ) );
      else
        return null;
    	
    }
    you put quotes here. that makes the word location an immutable string. you need to remove the quotes and let it be a variable once again.

  • #8
    New Coder
    Join Date
    Aug 2009
    Location
    Dirty Jersey
    Posts
    30
    Thanks
    0
    Thanked 2 Times in 2 Posts
    NEVER ever, in any script, use "document.write". never. not to say there are no applications for that, but just don't do it. alert it for testing, or use another method for inserting information into the DOM (webpage). get rid of it. replace it with "alert"

    so, the reason it looks like that is because you're looking at a textual representation of an array. every comma represents an index in the array:

    Code:
    location=Vancouver;,;,Vancouver,;
    "location=Vancouver;" is index 0 (comma)
    ";" is index 1 (comma)
    Vancouver is index 2 (comma)
    ";" is in index 3

    the reason you're seeing this is because you're alerting the entire array, and not an index of the array, the way the tutorial code does ("results[2]")

  • #9
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Jimbolgs View Post
    Finally, this is the code I’m trying to use to parse the location from the string:
    It returns a string like this: ; location=Vancouver;,;,Vancouver,;
    Code:
    function get_cookie(location)
    {
    var results = document.cookie.match ( '(^|;) ?' + "location" + '=([^;]*)(;|$)' );
    document.write (results);
    if ( results )
    return ( unescape ( results[2] ) );
    else
    return null;
    }

    Code:
    function get_cookie( cName )
    {
      var v;
    
      return decodeURIComponent( ( v = ( document.cookie || "" ).match( "(^|\\s)" + cName + "=([^;]+)" ) ) ? v[ 2 ] : "" );
    }

  • #10
    New Coder
    Join Date
    Nov 2011
    Posts
    32
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Sorry guys, I can't get this to work.

    My tutor's very good, not to suggest that you guys aren't, but perhaps with the code in front of him he can fix this.

    His lesson is this afternoon.

    Thanks for your help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •