要点：
1.使用localStorage存储
2._change_record_progress函数以字符串作为参数，用eval执行这个参数
3.使用了jQuery自定义事件，便于数据改变时实时更新显示
4.这一版代码中不考虑CSS问题
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<!-- jquery --> ???<script src="jquery-3.2.1.js"></script> ???<title>进度记录工具</title></head><body> ???<table> ???????<tr> ???????????<td><input type="text" id=‘item‘></td> ???????????<td><input type="text" id=‘progress‘></td> ???????????<td><input type="button" value="保存" onclick="save()"></td> ???????</tr> ???</table> ???<script> ???????$( ???????????function() { ???????????????show(); ???????????????$(this).bind("record_progress_is_changed",show); ???????????} ???????); ???????function show(){ ???????????$("table tr:gt(0)").remove(); ???????????var o = JSON.parse(localStorage.record_progress || "{}"); ???????????for(var k in o){ ???????????????var html = "<tr><td>"+k+"</td><td>"+o[k]+"</td></tr>"; ???????????????$html = $(html).append("<td><a href=‘javascript:void(0);‘ onclick=‘my_delete.call(this)‘>删除</a></td>"); ???????????????$("table").append($html); ???????????} ???????} ???????function save(){ ???????????var item = $("#item"); ???????????var progress = $("#progress"); ???????????if(item.length != progress.length){ ???????????????console.error("有错误，条目数和进度数不匹配!"); ???????????????return false; ???????????} ???????????_change_record_progress("o[‘"+item.val()+"‘]=‘"+progress.val()+"‘;"); ???????????item.val(""); ???????????progress.val(""); ???????} ???????function my_delete(){ ???????????var $this = $(this); ???????????var item = $this.parent().prev().prev(); ???????????_change_record_progress("delete o[‘"+item.text()+"‘];"); ???????} ???????function _change_record_progress(str){ ???????????var o = JSON.parse(localStorage.record_progress || "{}"); ???????????eval(str); ???????????localStorage.record_progress=JSON.stringify(o); ???????????$.event.trigger("record_progress_is_changed"); ???????} ???</script> ???</body></html>纯JS写的一款记录事项的单页应用
原文地址：http://www.cnblogs.com/jelif/p/7631729.html