jquery实现简单的待办事例查看案例

ps：这个html页面布局我是直接套用原作者的，去布局还是需要花一些时间的；

整个案例的核心思路在于：将数据保存到本地存储和从本地存储中获取到数据，将数据存放到本地存储，防止数据在页面刷新时丢失；

jQuery代码：

$(function(){
	load();
	//绑定事件，按下回车键，将数据保存在本地存储中
	$("#title").on("keydown", function(e){
		//判断用户是否按下回车键 回车键ascll码：13
		if(e.keyCode === 13){
			if($("#title").val() == ""){
				alert("不能输入空值！")
			}else{
				//先获取本地存储中原来的数据
				var localData = getData();
				//获取表单数据，将数据追加到localData中，更新localData中的数据
				// {title:$("#title").val(), done: false}数据在本地存储中保存的形式
				localData.push({title:$("#title").val(), done: false});
				// 调用saveDate()函数保存数据到本地存储
				saveData(localData);
				load();
			}
		}
	});
	//todolist 数据删除
	$("ol,ul").on("click", "a", function(){
		//先从本地存储中获取原有的数据
		var localData = getData();
		//获取当前被点击a的索引值
		var index = $(this).attr("id");
		//删除数组对象中index所对应的数据
		localData.splice(index, 1);
		//将新的数组对象保存在本地存储中
		saveData(localData);
		load();
	});
	//未完成的和完成的选项操作
	$("ol, ul").on("click", "input", function(){
		// 获取本地存储数据
		var localData = getData();
		//当点击checkbox时获取相应的id值
		var index = $(this).siblings("a").attr("id");
		//修改index相对应的done值 checked是固有属性
		localData[index].done = $(this).prop("checked");
		//保存数据到本地存储
		saveData(localData);
		//load data
		load();
	});
	//获取数据
	function getData(){
		var localData = localStorage.getItem("todolist");
		if(localData != null){
			//如果data不为空则将其转化为数组对象
			return JSON.parse(localData);
		}else{
			return [];
		}
	};
	//保存数据
	function saveData(data){
		//localData是数组对象，localStorage只能保存字符串形式，JSON.stringify(data)将数组转换为字符串格式
		localStorage.setItem("todolist", JSON.stringify(data));
	};
	//加载数据，并将数据添加到ol中
	function load(){
		var data = getData();
		//声明两个变量存放完成和未完成的个数
		var todoCount = 0;
		var doneCount = 0;
		//data是一个数组对象，each方法遍历
		// 在遍历添加之前，先清空ol,ul中的内容
		$("ol,ul").empty();
		$.each(data, function(index, elements){
			//对done中的值进行判断，如果为true加入ul中
			if(elements.done){
				$("ul").prepend("<li><input type='checkbox' checked='checked'/> <p>"+elements.title +"</p> <a href='javascript:;' id="+index+"></a></li>")
				doneCount++;
			}else{
				$("ol").prepend("<li><input type='checkbox'/> <p>"+elements.title +"</p> <a href='javascript:;' id="+index+"></a></li>")
				todoCount++;
			}
			$("#todocount").text(todoCount);
			$("#donecount").text(doneCount);
		})
	};
})