HTML５ − ToDo LIST

basic todo list

by tea4two

HTML

<ul id="list" contenteditable>
    <li>Edit Me！</li>
</ul>
<a href="javascript:void();" id="save">Save List</a>
<a href="javascript:void();" id="clear">Clear List</a>

CSS

li {
    margin-bottom: 5px;
    background-color: #e9e9e9;
}

JavaScript

$(function() {
    
    var theList = $('#list');
    $('#save').on('click', function(e){
        e.preventDefault;
        localStorage.setItem('todoList', theList.html());
    });
    $('#clear').on('click', function(e){
        e.preventDefault;
        localStorage.clear();
        location.reload();
    });
    
    loadToDo();
    
    function loadToDo() {
        if(localStorage.getItem('todoList')) {
            theList.html(localStorage.getItem('todoList'));
        }
    }
});