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

 

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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.