:::: MENU ::::

How to manipulate cookie of array, object and json datatype using jQuery Plugins?

jquery_logo

What’s Cookie

Cookie is small amount of key value based browser storage used to store tiny data on user’s browser by websites. It can be manipulated by javascript

Simple javascript code that manipulate cookie is

document.cookie = "key=value; expires=EXPIRY_TIME";

Cookie Plugins in jQuery

There are many jQuery plugins available to implement cookie easily with simple callbacks. That provides methods for add, remove or delete browser cookies.

List of Popular jQuery Cookies Plugins

Cookie manipulation with carhartl’s jQuery cookie plugin Plugin

  • Create session cookie that expires after user exits browser.

    Creating Cookie of string datatype

    $.cookie('key','value');

    Creating Cookie of array datatype

    $.cookie('key',['value1','value2'])

    Creating Cookie of json (object) datatype

    $.cookie('key','{
                      "sub_key_1":"sub_value_1",
                      "sub_key_2":"sub_value_2"
                    }'
            );
  • Creating cookie that expires after specific time.

    String cookie with 5 days of expiry

    // this cookie expires after 5 days
    $.cookie('key','value',{expires: 5});

    array cookie with 5 days of expiry

    $.cookie('key',['value1','value2'], { expires: 5 });

    object cookie with 5 days of expiry

    $.cookie('key','{
                      "sub_key_1":"sub_value_1",
                      "sub_key_2":"sub_value_2"
                    }'
                  , {
                    expires: 5
                    }          
            );
  • More options

    How to set ssl (https) cookie with jQuery cookie plugin?

    $.cookie('key','value'
                  , {
    		secure: true
                    }          
            );

    How to set cross subdomain cookie with jQuery cookie plugin?

    cross_domain_cookie

    Just prexif your domain value with dot (i.e. “.yourdomain.com”) in cookie option

    $.cookie('key','value'
                  , {
    				secure: true
                    }          
            );

    So above cookie is valid for all subdomain of site vikaskbh.com Check demo here

    Why & how to set cookie path with jQuery cookie plugin?

    path defines scope of cookie. By default, cookies are being set to directory structure of url. i.e. if you are accessing http://www.example.com/directory and try to set cookie, it will be set to /directory path. You could set it to root directory path “/” with cookie path option.

    $.cookie('key','value'
                  , {
    				path: '/'
                    }          
            );
  • How to read cookie using jQuery plugin?

    Reading cookie is simple, just pass cookie key to $.cookie() function.

    Reading string cookie

    $.cookie('key');

    Reading array cookie

    $.cookie('key').split(",");

    Reading json cookie

    $.parseJSON($.cookie('key'));
  • How to delete cookie using jQuery plugin?

    To delete cookie, just use function $.removeCookie() and supply cookie key.

    $.removeCookie('key');

Cookie manipulation with Google code cookie plugin

  • Create cookie

    Simple string cookie

    $.cookies.set('key');

    JSON cookie

    $.cookies.set('key',{
    	sub_key:'sub_value'
    });
  • Read cookie

    $.cookies.get('key');
  • Delete cookie

    $.cookies.del('key');

So, what do you think ?

  •