HTML5 - Local Storage

HTML

<input type="text"  contenteditable id="list">

<a href="#" id="save">保存</a>
<a href="#" id="clear">破棄</a>

CSS

li {
    background-color: #ccc;
    margin-bottom: 5px;
    padding: 5px;
    list-style: none;
}

JavaScript

$(function(){
    
    var theList = $('#list');
    
    //保存
    $('#save').on('click', function(e){
        e.preventDefault();
        localStorage.setItem('todoList',theList.val());
    });
    
    //破棄
    $('#clear').on('click', function(e){
        e.preventDefault();
        localStorage.clear();
        location.reload();
    });
    
    //すでにlocalstorageが存在してい場合
    function loadToDo() {
        if( localStorage.getItem('todoList') ){
            theList.html(localStorage.getItem('todoList'));
        }
    }
    
    //初回実行
    loadToDo();
    
});