7

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???

user2942566
  • 455
  • 4
  • 10
  • 22
  • 2
    http://stackoverflow.com/questions/1599287/create-read-and-erase-cookies-with-jquery – Raj Mohan Jan 02 '14 at 06:00
  • check out this link [Working with cookies in jQuery](http://www.sitepoint.com/eat-those-cookies-with-jquery/) – Ravi Jan 02 '14 at 06:04
  • Check out http://stackoverflow.com/questions/1458724/how-to-set-unset-cookie-with-jquery.. Which explains everything clearly. – Aks Jan 02 '14 at 06:05

4 Answers4

13
$(".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

Kishorevarma
  • 936
  • 6
  • 23
  • thanks for your ans,Kishorevarma. however im not sure what this does: $.cookie('name',name); $.cookie('description',description); what does $.cookie('name') do? – user2942566 Jan 03 '14 at 01:53
  • $.cookie('name',name) does store the value of name which you enter in input box in cookie called 'name' and $.cookie('description',description); also do the same it will store the description data in cookie called description and when you use $.cookie('name') , it will see whether any cookie is created with the name called as 'name'. and if its there then it will return the value – Kishorevarma Jan 04 '14 at 17:49
  • There is no such function called `cookie` in jQuery as far as i know.... – T J Aug 11 '14 at 16:36
  • there are plugins not inbuilt – Kishorevarma Aug 13 '14 at 06:26
  • 1
    @Kishorevarma If your code depends on a plugin, the least you can do is specify which plugin - preferably with a link - in your answer. – Vala Sep 26 '14 at 15:33
  • this is not working – Sarfaraj Sipai Jan 01 '18 at 11:52
11

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' });
Aks
  • 1,567
  • 13
  • 23
3

Here is an example what you are trying to achieve. See if it works for you

<body>
        <script>
            $(document).ready(function(){
                $("#btn").click(function(){
                    var text1 = $('#text1').val();
                    var text2 = $('#text2').val();
                    $.cookie('text1', text1);
                    $.cookie('text2', text2);
                });
                checkCookieValues();
            });
            function checkCookieValues(){
                if ($.cookie('text1')!=="undefined") {
                    $('#text1').val($.cookie('text1'));
                }
                if ($.cookie('text2')!=="undefined") {
                    $('#text2').val($.cookie('text2'));
                }
            }
        </script>
        <form name="trial" id="trial">
            <input type="text" value="" id="text1" name="text1"/>
            <input type="text" value="" id="text2" name="text2"/>
            <input type="button" value="btn" id="btn"/>
        </form>
    </body>

NOTE: Jquery cookie plugin is required to use cookies through jquery

0

to set a cookie

$.cookie("cookie_name", "cookie_value");

to get a cookie

alert( $.cookie("cookie_name") );

to remove a cookie

$.removeCookie("cookie_name");
Satish Sharma
  • 9,547
  • 6
  • 29
  • 51