how to use JQuery, Javascript cookies?

Question

I'm currently creating a simple todo list, I'd appreciate if someone could help me with cookies :)

I've got 2 functions to set and get cookies:

function setCookie(key, value) {
   var expires = new Date();
   expires.setTime(expires.getTime() + 31536000000); 
   document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
}

function getCookie(key) {
   var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
   return keyValue ? keyValue[2] : null;
}

There's a button (with id #add_todo ) to add a task into todo list (with class .todo_list). I set the value of text input $('#todo_description').val() into cookies.

$(document).ready( function() {  
$('#add_todo').click( function() {

    setCookie('test', $('#todo_description').val()); 
    var todoDescription = $('#todo_description').val();

    $('.todo_list').prepend(
        div class="todo"
            +checkbox              //I avoided html brackets here
            + getCookie('test')
            +delete_button
            /div
        );
});

Everything works fine but when i reload the web page the tasks i added before are not displayed, and i understand i do it wrong. I'd like to store whole div (class="todo") which contains todoDescription, checkbox, delete button and stylings. I tried to store tasks in array but couldn't retrieve its elements one by one.. thanks in advance!

manzoid · Accepted Answer · 2012-09-25 16:21:50Z

1

It's probably not a good idea to try to store entire chunks of markup into a cookie. Cookies are more appropriate for storing small snippets of data.

I tried to store tasks in array but couldn't retrieve its elements one by one

What is stopping you from iterating over an array?

In any case, there's probably a fundamental design flaw here, which is that you shouldn't be trying to store a lot of data into a cookie. Cookies can only hold a few kilobytes of data. Consider storing the actual data in another store that has more capacity. Is this for a website? If there is a backend, then it should be stored in a database on the backend, and the cookie data just used to authenticate and differentiate users.

answered Sep 25, 2012 at 16:21

manzoid

1,2258 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kato · Accepted Answer · 2012-09-25 16:10:05Z

0

The easiest answer is to use a plugin like Mr. Hartl's jQuery cookies (I use this one often).

<script src="jquery.cookies.js"></script>
<script>
   // of course, you no longer need these functions, but just plugging this into your example...

   function setCookie(key, val) {
      var expires = new Date().getTime() + 31536000000;
      $.cookie( key, val, { expires: expires, path: '/' } );
   }

   function getCookie(key) {
      return $.cookie(key);
   }
</script>

If you need to reinvent the cookie cutter, you may want to explain that in your question.

answered Sep 25, 2012 at 16:10

Kato

40.6k6 gold badges124 silver badges149 bronze badges

1 Comment

Barmar Over a year ago

Or simply var getCookie = $.cookie;

Collectives™ on Stack Overflow

how to use JQuery, Javascript cookies?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related