ExtJS 4 Cookies

Hello,

I thought I should share this one with you. Generally we set cookies using our server side scripts such as in PHP we use set_cookie and $_COOKIE array to set and get cookies data respectively.

But if you are developing a client side application and are using ExtJS then this post gives you a kick start to work with cookies using one of our favourite Javascript framework.

Lets get started.

There are 3 main function with cookies

  1. Create a cookie
  2. Get a cookie value
  3. Remove a cookie

We will go through each one of them with example.

Create a cookie

Alright so lets create a cookie first

Here is a simple code Example using Ext.util.Cookies object

The above code creates a cookie with key myCookie.

Details of set can be found here http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.Cookies-method-set

Ext.util.Cookies.set() accepts other arguments aswell as shown below

set( name, value, [expires], [path], [domain], [secure] )

Parameters

  • name : The name of the cookie to set.
  • value : The value to set for the cookie.
  • expires : Date this cookie will expire. Default is browser session and please note that whatever value you pass here will be converted to GMT data
  • path : Default value is “/” but you can be more restrictive.
  • domain : If you would like to limit the cookie access by domain then you should pass this value. e.g. if I set this value to jaspreetchahal.org then my cookie will be available to anysubdomain.jaspreetchahal.org
  • secure : true or false if you are using a secure channel i.e. request go through HTTPs then set it to true. Please note that cookie will not be available to plain httpequivalent page. You must create a secure cookie while you are using HTTPs protocol.

Create a ExtJS 4 cookie with expiry

Lets now create another cookie that expires in 1 year time and that is done as shown below

Easy done!

Alright now that you know how to set a cookie lets check how to retrieve our cookie value

Get a cookie value

Here is an example on how to get a cookie value. We will use get() method of class Ext.util.Cookies

The above code should print myCookieValue

You can check details for this function by browsing to

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.Cookies-method-get

Last thing that I would like to show you is how to delete a cookie

Remove a cookie

Here is an example on how to delete a cookie.

 

Above line will clear the cookie with key myCookie

Pretty simple isn’t it.

I hope that this helps. Just in case I got a fact wrong please leave you comments for me to correct it.

Cheers

 

Comments

  1. I’m Defined Cookie in php form and Ext JS Classic don’t reognize the cookie how resolv?

  2. please tell me how to use this with -remember me checkbox-on login page
    handler: function (field, value) {
    scope: this,
    this.checkValue = field.getValue();
    console.log(this.checkValue);
    if (this.checkValue == true) {
    alert(1111);
    Ext.util.Cookies.set(‘myCookie’,’#loginemail’);
    }
    else if (this.checkValue == false) {
    }

    • Iressler says:

      You almost have it correct, but as Jaspreet said if you don’t specify a value for the expires argument of Ext.util.Cookie.set() it will expire when the browser session ends, which is not helpful for saving their email. You’ll want to replace the line
      Ext.util.Cookies.set(‘myCookie’,’#loginemail’);
      with lines similar to
      var expirationDate = new Date();
      expirationDate.setDate(expirationDate.getDate()+7)
      Ext.util.Cookies.set(‘myCookie’, ‘#loginemail’, expirationDate);
      Where 7 is the number of days to store the cookie.

      Hope this helps.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.