title: Create to-do list in jQuery that remembers which items have been done
body: <p><strong>To-do list in jQuery</strong></p>
  
  <p>I've followed this excellent tutorial on how to create a to-do list in jQuery: </p>
  
  <p><a href="http://www.youtube.com/watch?v=SkmF8eUOUrE" rel="nofollow">http://www.youtube.com/watch?v=SkmF8eUOUrE</a></p>
  
  <p>I've adapted it (and therefore simplified it) slightly by removing the ability to add and remove tasks. Instead the list will be populated by a database and updated every so often. Users will be able to view this task list and tick off which tasks they've done. So every user has the same task list but they can all check off their own personal progress on that task list.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>The part that's missing is getting the browser to remember what tasks the user has done. When a user ticks an item on the list and refresh the page, the list refreshes and the completed tasks are forgotten.</p>
  
  <p><strong>Question</strong></p>
  
  <p>What's the best way to resolve this? I'm thinking of using cookies, but would I need to have a different cookie for every task? The to-do list will be updated regularly so in theory we might need to create thousands of cookies. Is this ok or is there a better way?</p>
  
  <p>Here is my jQuery:</p>
  
  <pre><code>function completeItem(){
  if( jQuery(this).parent().css('textDecoration') == 'line-through' ){
      jQuery(this).parent().css('textDecoration', 'none').removeClass('due-linethrough');
  }else{
      jQuery(this).parent().css('textDecoration', 'line-through').addClass('due-linethrough');
  }
  }
  
  jQuery(function() {
  
  jQuery(document).on('click', '.complete', completeItem); 
  
  });
  </code></pre>
  
  <p>And here's the html</p>
  
  <pre><code>&lt;ul id="noticeboard-list"&gt;
  &lt;li&gt;&lt;label class="checkbox"&gt;&lt;input type="checkbox" class="complete"&gt;Do task 1&lt;/label&gt;&lt;/li&gt;
  &lt;li&gt;&lt;label class="checkbox"&gt;&lt;input type="checkbox" class="complete"&gt;Do task 2&lt;/label&gt;&lt;/li&gt;
  &lt;li&gt;&lt;label class="checkbox"&gt;&lt;input type="checkbox" class="complete"&gt;Do task 3&lt;/label&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Many thanks for your help!</p>
  
  <p>Katie</p>
  
  <p><strong>Edits following suggestion to use jstorage from kri5t</strong></p>
  
  <p>Instead of cookies I'm trying to use jstorage. The following shows my new code:</p>
  
  <p><strong>jquery</strong></p>
  
  <pre><code>function completeItem(){
  
          taskID=jQuery(this).attr('id');
  
          if( jQuery(this).parent().css('textDecoration') == 'line-through' ){
                  jQuery(this).parent().css('textDecoration', 'none').removeClass('due-linethrough');
                  jQuery.jStorage.set(taskID, 'done');
          }else{
              jQuery(this).parent().css('textDecoration', 'line-through').addClass('due-linethrough');
              jQuery.jStorage.deleteKey(taskID);
  
          }
      }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul id="noticeboard-list"&gt;
  &lt;li&gt;&lt;label class="checkbox"&gt;&lt;input type="checkbox" class="complete" id="HPtask1"&gt;Do task 1&lt;/label&gt;&lt;/li&gt;
  &lt;li&gt;&lt;label class="checkbox"&gt;&lt;input type="checkbox" class="complete" id="HPtask2"&gt;Do task 2&lt;/label&gt;&lt;/li&gt;
  &lt;li&gt;&lt;label class="checkbox"&gt;&lt;input type="checkbox" class="complete" id="HPtask3"&gt;Do task 3&lt;/label&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>When a user ticks the checkbox, the taskID is set to 'done'. When they untick it, it is deleted. But how do I use this information to set the text-decoration to line-through for all checkboxes which have Keys in jstorage (e.g. HPtask1) that correspond with the matching ID (e.g. HPtask1) where the value of the key is 'done'? (Hope that makes sense!).</p>
  
  <p>Thanks again :D</p>