SOURCE

function clear() {
    localStorage.clear();//本地储存-清晰的
    load();//刷新界面
}
function postaction() {
    var title = document.getElementById("title");//获取输入框
    if (title.value == "") {
        alert("此内容不能为空！");
    } else {
        var data = loadData();//确定数据是否为空
        var todo = { "title": title.value, "done": false };//完成：f
        data.push(todo);//push:增加数组元素
        saveData(data);//保存data。
        var form = document.getElementById("form");//获取元素
        form.reset();//remove（清除）与reset（复位）的区别?
        load();//刷新界面
    }
}
function loadData() {//加载数据
    var collection = localStorage.getItem('todo');
    //本地储存内    获取项目
    if (collection != null) {
        return JSON.parse(collection);
        //如果不是空的，就返回collection本地数据。
    } else return [];//???
}
//不太理解？保存排序？？
function saveSort() {
    var todolist = document.getElementById("todolist");
    var donelist = document.getElementById("donelist");
    var ts = todolist.getElementsByTagName("p");//获取todolist下的p.
    var ds = donelist.getElementsByTagName("p");
    var data = [];//空数组
    for (i = 0; i < ts.length; i++) {
        var todo = { "title": ts[i].innerHTML, "done": false };//innerHTML修改文本？
        data.unshift(todo);//unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度
    }
    for (i = 0; i < ds.length; i++) {
        var todo = { "title": ds[i].innerHTML, "done": true };//innerHTML修改文本？
        data.unshift(todo);//开头添加一个或更多元素
        saveData(data);//保存data
    }
}
//??
function saveData(data) {
    localStorage.setItem("todo", JSON.stringify(data));
    //本地存储   集合项目                弦化
}
function remove(i) {  //删除任务
    var data = loadData();
    var todo = data.splice(i, 1)[0];  //添加
    saveData(data);//保存data
    load();
}
function update(i, field, value) {//更新
    var data = loadData();
    var todo = data.splice(i, 1)[0];  //添加
    todo[field] = value;
    data.splice(i, 0, todo);
    saveData(data);//保存data
    load();
}
//修改任务名称,有些看不懂
function edit(i) {
    load();
    var p = document.getElementById("p-" + i)//??
    title = p.innerHTML;//赋值？？
    p.innerHTML = "<input id='input-" + i + "'value='" + title + "'/>";//??
    var input = document.getElementById("input-" + i);
    input.setSelectionRange(0, input.value.length);
    //setSelectionRange设置选择范围
    input.focus();//focus:集中.
    input.onblur = function () {
        if (input.value.length == 0) {
            p.innerHTML = title;
            alert("此内容不能为空");
        } else {
            update(i, "title", input.value);
        }
    }
}
function load() {
    var todolist = document.getElementById("todolist");
    var donelist = document.getElementById("donelist");
    var collection = localStorage.getItem("todo");//收集=本地储存。拿取项目
    if (collection != null) {
        var data = JSON.parse(collection);//解析，收集
        var todoCount = 0;
        var doneCount = 0;
        var todoString = "";
        var doneString = "";
        for (var i = data.length - 1; i >= 0; i--) {
            if (data[i].done) {//
                doneString += "<li draggable='true'><input type='checkbox'onchange='update(" + i + ",\"done\",false)' checked='checked' />"
                    + "<p id='p-" + i + "' onclick='edit(" + i + ")'>" + data[i].title + "</p>"
                    + "<a href='javascript:remove(" + i + ")'>-</a></li>";
                doneCount++;
            } else {
                todoString += "<li draggable='true'><input type='checkbox' onchange='update(" + i + ",\"done\",true)' />"
                    + "<p id='p-" + i + "' onclick='edit(" + i + ")'>" + data[i].title + "</p>"
                    + "<a href='javascript:remove(" + i + ")'>-</a></li>";
                todoCount++;
            }
            todocount.innerHTML = todoCount;
            todolist.innerHTML = todoString;
            donecount.innerHTML = doneCount;
            donelist.innerHTML = doneString;
        }
    } else {
        todocount.innerHTML = 0;
        todolist.innerHTML = "";
        donecount.innerHTML = 0;
        donelist.innerHTML = "";
    }
    window.onload = load;//加载数据
    window.addEventListener("storage", load, false);//监听
    var dragSrcE1 = null;
}
function handleDragStart(e) {
    dragSrcE1 = this;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault();
    }
    e.dataTransfer.dropEffect = "move";
    return false;
}
function handleDrop(e) {
    if (e.stopPropagation) {
        e.stopPropagation();
    }
    if (dragSrcEl != this) {
        dragSrcEl.innerHTML = this.innerHTML;
        this.innerHTML = e.dataTransfer.getData('text/html');
    }
    return false;
}

<body>
	<header>
        <section>
            <form action="javascript:postaction()" id="form">
                <label for="title">ToDoList</label>
                <!--label  标题  -->
                <input type="text" id="title" name="title" placeholder="123"
                 required autocomplete="off"/>
                 <!--placeholder   文本框内的虚字
                 required 必需在提交表单之前填写输入字段
                 autocomplete="on|off">  on字段填充  off禁止自动填充
                 -->
            </form>
        </section>
    </header>
    <section>
        <!-- 部分 -->
        <h2 onclick="save()">正在进行 <span id='todocount'>0</span></h2>
        <!-- 使用 <span> 元素对文本中的一部分进行着色 -->
        <ol id="todolist" class="demo-box"></ol>
        <!-- 您可以使用 getElementById() 来访问 <ol> 元素： -->
        <h2>已经完成 <span id='donecount'>0</span></h2>
        <!-- span  计数 -->
        <ul id="donelist"></ul>
        <!-- ul无序列表    ol有序列表 -->
    </section>
    <footer>
        <!-- 页脚，实行删除功能 -->
        Copyright &copy; 2014 todolist.cn <a href="javascript:clear();">clear</a>
    </footer>
    <!-- script 脚本 -->
    <!-- <script type="text/javascript" src="index.js"></script> -->
</body>

body {margin:0;padding:0;font-size:16px;background: #CDCDCD;}
header {height:50px;background:#333;background:rgba(47,47,47,0.98);}
section{margin:0 auto;}
label{float:left;width:100px;line-height:50px;color:#DDD;font-size:24px;cursor:pointer;font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;}
header input{float:right;width:60%;height:24px;margin-top:12px;text-indent:10px;border-radius:5px;box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;border:none}
input:focus{outline-width:0}
h2{position:relative;}
span{position:absolute;top:2px;right:5px;display:inline-block;padding:0 5px;height:20px;border-radius:20px;background:#E6E6FA;line-height:22px;text-align:center;color:#666;font-size:14px;}
ol,ul{padding:0;list-style:none;}
li input{position:absolute;top:2px;left:10px;width:22px;height:22px;cursor:pointer;}
p{margin: 0;}
li p input{top:3px;left:40px;width:70%;height:20px;line-height:14px;text-indent:5px;font-size:14px;}
li{height:32px;line-height:32px;background: #fff;position:relative;margin-bottom: 10px;
	padding:0 45px;border-radius:3px;border-left: 5px solid #629A9C;box-shadow: 0 1px 2px rgba(0,0,0,0.07);}
ol li{cursor:move;}
ul li{border-left: 5px solid #999;opacity: 0.5;}
li a{position:absolute;top:2px;right:5px;display:inline-block;width:14px;height:12px;border-radius:14px;border:6px double #FFF;background:#CCC;line-height:14px;text-align:center;color:#FFF;font-weight:bold;font-size:14px;cursor:pointer;}
footer{color:#666;font-size:14px;text-align:center;}
footer a{color:#666;text-decoration:none;color:#999;}
@media screen and (max-device-width: 620px) {section{width:96%;padding:0 2%;}}
@media screen and (min-width: 620px) {section{width:600px;padding:0 10px;}}