ToDo List Using HTML5 Content Editable & Local Storage

I have been wanting to showcase some of the very easy to implement HTML5 features. This example will be building what seems to be the obligatory to-do list. A preview of what is being made can be seen here.

The two I will be covering today will be Content Editable and Web Storage (local storage). Both of which have very good browser support:

• http://caniuse.com/#feat=contenteditable
• http://caniuse.com/#feat=namevalue-storage

Content Editable

This is very straightforward and easy to implement as it is an HTML5 attribute. So simply add contenteditable as an attribute to the html tag you wish to target. When a user clicks on this section of content they will be able to type in and edit it. Very easy and powerful yes?! No more need to replace content with a form populated with the existing content through a bunch of different tricks using scripts.

The catch however is that any edits happen in that instance of the page. On refresh the default content will be served. In the grand scheme of things this doesn’t serve much good. Why be able to edit something without saving it. This does allow us to skip many steps needed just to edit content in the context of the page. One can still access this new edited content in the DOM and use JavaScript to post the new text to a database or whatever the need of the project is.

In the example one can see the markup is minimal. Just the first list-item is provided and more list items can be created by the return/enter keystroke.

<h2>To Do:</h2>
<ul>
  <li>Enter item</li>
</ul>

If one wants to store this edited information to the user agent_browser there is another new tool one may utilize. That is Web_Local Storage.

Web/Local Storage

This is a little more complex to implement but is still very fluid and simple for the power of the feature. This feature allows us to store data (stringified) to the user agent. Similar to how cookies are stored but we have a lot more memory capacity (up to 5mb) for storing information.

So to utilize localStorage one can access it through javascript as a global object localStorage. That object has three primary methods being used in this example which covers the basics of storing, retrieving and deleting data:

localStorage.setItem();
s;
localStorage.getItem();
localStorage.clear();

Implementation for our todo list first comes in the markup because hooks are needed to trigger these events. So let’s add a save a clear button to our mark-up:

<a id="clear" href="javascript:void(0);">Clear</a>
|
<a id="save" href="javascript:void(0);">Save</a>

The JavaScript doesn’t get too advanced either. When the document is ready the following occurs:

1. Store the <ul> into a variable for future editing
2. Add event handler to the save button to use the setItem() method and store the ul html in the key named ‘list’
3. Add event handler to clear the list key in localStorage and reload the page (which will load the pages default content)
4. Add a conditional statement to determine whether or not the ‘list’ key exists. If it exists there is information in localStorage which has been saved and can be loaded into the page. So the $ul is set to what is stored. Otherwise the default content/markup will load as is from the html file.

$(document).ready(function () {
  var $ul = $("ul");

  $("#save").click(function () {
    localStorage.setItem("list", $ul.html());
  });

  $("#clear").click(function () {
    localStorage.clear("list");
    location.reload();
  });

  if (localStorage.getItem("list")) {
    $ul.html(localStorage.getItem("list"));
  }
});

Code: https://github.com/stvedt/editable-storage Live Preview: http://stephentvedt.com/examples/editable-storage/