原生JS：ToDoList(带localStorage储存)

css:

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;
				}
			}

HTML:

<header>
			<section>
				<form action="" id="form" onclick="">
					<label for="title">ToDoList</label>
					<input type="text" id="title" name="title" placeholder="添加ToDo" required="required"
						autocomplete="off" />
				</form>
			</section>
		</header>
		<section>
			<h2>正在进行 <span id="todocount"></span></h2>
			<ol id="todolist" class="demo-box">

			</ol>
			<h2>已经完成 <span id="donecount"></span></h2>
			<ul id="donelist">
			</ul>
		</section>
		<footer>
			Copyright &copy; 2014 todolist.cn <a href="javascript:clear();">clear</a>
		</footer>

JavaScript:

loadData()
			var input = document.querySelector('input');
			var ollist = document.querySelector('#todolist');
			var ullist = document.querySelector('#donelist');
			input.onkeydown = function(e) {
				if (e.keyCode === 13) {
					if (input.value == '') {
						return
					} else {
						var todolist = {
							title: input.value,
							done: false
						}
						var arr = getData();
						arr.push(todolist)

						saveData(arr)
					}
				}
			}

			//获取数据并储存
			function getData() {
				var data = window.localStorage.getItem('todo')
				if (data) {
					return JSON.parse(data);
				} else {
					return [];
				}
			}
			//添加数据到列表
			function loadData() {
				var data = getData()
				var ollist = document.querySelector('#todolist');
				var ullist = document.querySelector('#donelist');
				var todoCount = document.querySelector('#todocount');
				var doneCount = document.querySelector('#donecount');
				var todocount = 0;
				var donecount = 0;
				//删除子节点的方法
				var childs = ollist.childNodes;
				for (var i = childs.length - 1; i >= 0; i--) {
					ollist.removeChild(childs[i]);
				}
				var ulchilds = ullist.childNodes;
				for (var i = ulchilds.length - 1; i >= 0; i--) {
					ullist.removeChild(ulchilds[i]);
				}
				data.forEach((item, index) => {
					var li = document.createElement('li') //生成li
					li.innerHTML = "<input type='checkbox' class='change'/><p id='p" + index + "'>" + item.title +
						"</p><a href='javascript:;' id=" + index + ">-</a>"
					if (item.done) {
						//已完成
						ullist.insertBefore(li, ullist.children[0])
						li.children[0].checked = 'checked'
						donecount++
					} else {
						//正在进行中
						ollist.insertBefore(li, ollist.children[0])
						todocount++
					}
					todoCount.innerText = todocount;
					doneCount.innerText = donecount;
				})
			}
			//储存数据
			function saveData(arr) {
				return window.localStorage.setItem('todo', JSON.stringify(arr))
			}
			//删除数据
			function removeData() {
				ollist.addEventListener('click', function(e) {
					if (e.target.nodeName === 'A') { //找到对应的元素节点属性
						var index = e.target.getAttribute('id')
						console.log(index);
						var data = getData()
						data.splice(index, 1)
						saveData(data)
						loadData()
					}
				}, false)
			}
			removeData()

			//编辑数据
			function editData() {
				ollist.addEventListener('click', function(e) {
					if (e.target.nodeName === 'P') {
						var id = e.target.getAttribute('id')
						var p = document.getElementById(id)
						console.log(p);
						//替换p中的innerHTML
						var title = p.innerHTML
						p.innerHTML = "<input type='text' value='" + title + "' id=input" + id + "'/>"
						//失去焦点的时候
						var input = document.getElementById('input' + id)
						input.select()
						input.addEventListener('blur', function() {
							if (input.value != '') {
								p.innerHTML = input.value //把input的value值赋值给p.innerHTML储存新的p.innerHTML
								var data = getData()
								var index = id.substring(1) //获取当前修改的索引值
								data[index].title = p.innerHTML
								saveData(data) //储存新的p.innerHTML
								loadData()
							} else {
								return;
							}
						}, false)
					}
				})
			}
			editData()
			//切换数据
			function changeData() {
				ollist.addEventListener('click', function(e) {
					if (e.target.className === 'change') {
						console.log(e.target);
						if (e.target.nextElementSibling.nextElementSibling) {
							console.log(e.target.nextElementSibling);
							var id = e.target.nextElementSibling.nextElementSibling.getAttribute('id')
							var data = getData()
							data[id].done = true
							saveData(data) //储存新的p.innerHTML
							loadData()
						}
					}

				})
				ullist.addEventListener('click', function(e) {
					if (e.target.className === 'change') {
						var id = e.target.nextElementSibling.nextElementSibling.getAttribute('id')
						console.log(id);
						var data = getData()
						data[id].done = false
						saveData(data) //储存新的p.innerHTML
						loadData()
					}
				})
			}
			changeData()