how to save data in a cookie using jquery [duplicate]

Question

I'm trying to save certain data into cookies, in such a way that if I jump from one page to another, the data entered should be saved and retrieved back on refresh. I have a link:

<div class="esc-policy">
     <a href="#">New Link</a>    
</div>

before i fire the click event i need to save the entered the following data fields:

     <table class="form">
       <tr>
          <td class="label">
                <label>Name*</label>
                <input id="nameInput" type="text" maxlength="100"/>
         </td>    
        <td class="label">
               <label>Description</label>
               <input id="descriptionInput" type="text" maxlength="200" >
        </td>
       </tr>
    </table>

I have something like this as my js:

if ($.cookie('back_to_url_onPage_referesh')) {
  this.name.attr("value", $.cookie('name'));
  this.description.attr("value", $.cookie('description'));
}

I'm not sure of how this works though. Can someone please help!!

Thanks in advance...

I am able to save the values in the cookie..however I still dont get how do i retrieve it while jumping back from one url to another. Ex:i have a url: ('#/link/create') where im creating this cookie..onclick of <a href="#">New Link</a>..i need to navigate to another url '#/new-link/create', enter few form fields on that page and when i hit the Save button- <a href="#" class="btn">Save</a>, it should take me back to this url: ('#/link/create')..when i navigate between pages, the data is gone ofcourse, how to save that data on the UI side???

Answer 1

$(".esc-policy  a").on('click',function(){
   var name = $("#nameInput").val(),
   description = $("#descriptionInput").val();
   $.cookie('back_to_url_onPage_referesh', 1);
   $.cookie('name',name);
   $.cookie('description',description);
});

If you add this code it will work as it is in your js. if you don't use cookie plugin in jquery. use native document.cookie expression, or extend jquery object with cookie function

you can use this plugin https://code.google.com/p/cookies/wiki/Documentation#With_jQuery

Answer 2

TO use Cookies check the jQUery Cookie plugin

https://github.com/carhartl/jquery-cookie

You can then do:

$.cookie("test", 1);

To delete:

$.removeCookie("test");

Additionally, to set a timeout of a certain number of days (5 here) on the cookie:

$.cookie("test", 1, { expires : 5 });

If the expires option is omitted, then the cookie becomes a session cookie, and is deleted when the browser exits.

To cover all the options:

$.cookie("test", 1, {
   expires : 10,           //expires in 10 days

   path    : '/',          //The value of the path attribute of the cookie 
                       //(default: path of page that created the cookie).

   domain  : 'jquery.com',  //The value of the domain attribute of the cookie
                       //(default: domain of page that created the cookie).

   secure  : true          //If set to true the secure attribute of the cookie
                       //will be set and the cookie transmission will
                       //require a secure protocol (defaults to false).
});

To read back the value of the cookie:

var cookieValue = $.cookie("test");

You may wish to specify the path parameter if the cookie was created on a different path to the current one:

var cookieValue = $.cookie("test", { path: '/foo' });