0
点赞
收藏
分享

微信扫一扫

toDoList记事清单案例:运用本地存储

江南北 2022-04-15 阅读 219

本文主要是对记事清单案例中javaScript部分的分析。

目录

功能描述:

主要思路

一.toDoList 按下回车把新数据添加到本地存储里面

二.删除操作

三.正在进行和已完成选项操作

四.统计正在进行和已完成个数


功能描述:

  1. 文本框里面输入内容,按下回车,就可以生成待办事项。
  2. 点击待办事项复选框,就可以把当前数据添加到已完成事项里面。
  3. 点击已完成事项复选框,就可以把当前数据添加到待办事项里面。
  4. 但是本页面内容刷新页面不会丢失。

切记: 页面中的数据,都要从本地存储里面获取,这样刷新页面才不会丢失数据,所以先要把数据保存到本地存储里面。存储的数据格式:var todolist =  [{ title : ‘xxx’, done: false}]

主要思路

一.toDoList 按下回车把新数据添加到本地存储里面

利用事件对象.keyCode判断用户按下回车键(13),当用户输入内容不为空时,进行操作。

先要读取本地存储原来的数据(声明函数 getLocal()),放到这个数组里面。 之后把最新从表单获取过来的数据,追加到数组里面。 最后把数组存储给本地存储 (声明函数 savaLocal())。

$("#title").on("keydown",function(e) {
		if(e.keyCode===13) {
			if ($(this).val().trim()==="") {
				alert("请输入您想要的操作");
			}else {
				//读取本地存储内容
				var local=getLocal();
				//新内容追加给本地存储里:先追加给对象,对象再转化为字符串放入本地存储
				local.push({title:$(this).val(),done:false});
				// console.log(local)
				// localStorage.setItem("todolist",JSON.stringify(local));
				saveLocal(local);
				//2.本地存储数据渲染到页面中
				load();
				//优化
				$(this).val("");
			}	
		}
	})
  • 读取本地存储数据getLocal()函数

获取本地存储数据,需要把里面的字符串转换为对象格式JSON.parse() 我们才能使用里面的数据。

//读取本地存储内容
	function getLocal() {
		var data=localStorage.getItem("todolist")
		if(data!==null) {
			return JSON.parse(data);
		}else {
			return [];
		}	
	}
  • 放入本地存储函数

放入本地存储的数据必须是字符串形式的,所以利用JSON.stringify()方法把数组转化为字符串再放入本地存储。

//放入本地存储,注意形参的使用
	function saveLocal(data) {
		localStorage.setItem("todolist",JSON.stringify(data));
	}
  • 渲染加载数据函数
//渲染加载数据
	function load() {
		var todoCount=0;
		var doneCount=0;
		//把ol,ul里面的内容清空
		$("ol,ul").empty();
		var data=getLocal();
		$.each(data,function(i,ele) {
			//注意自定义属性id的添加
			// var lis=$("<li><input type='checkbox'><p>"+ele.title+"</p><a href='javascript:;' id="+i+"></a></li>")
			//如果是true添加到ul已经完成事项中,如果是false则添加到ol正在进行事项中
			if(ele.done) {
				$("ul").prepend($("<li><input type='checkbox' checked='true'><p>"+ele.title+"</p><a href='javascript:;' id="+i+"></a></li>"));
				doneCount++;
			}else {
				$("ol").prepend($("<li><input type='checkbox'><p>"+ele.title+"</p><a href='javascript:;' id="+i+"></a></li>"));
				todoCount++;
			}
			
		})
		//统计事项
		$("#todocount").html(todoCount);
		$("#donecount").html(doneCount);
	}
	

二.删除操作

核心原理:先获取本地存储数据,删除对应的数据,保存给本地存储,重新渲染列表li。

$("ol,ul").on("click","a",function(e) {
		var local= getLocal();
		// console.log(local)
		var index=$(e.target).attr("id");
		// console.log(index)
		local.splice(index,1);
		saveLocal(local);
		load();
	})

三.正在进行和已完成选项操作

当点击复选框,修改本地存储数据,再重新加载数据列表。

$("ol,ul").on("click","input",function(e) {
		var local= getLocal();
		var  index=$(e.target).siblings("a").attr("id")
		// console.log($(e.target).prop("checked"))
		local[index].done=$(e.target).prop("checked")
		// console.log(local)
		saveLocal(local);
		load();
		
	})

四.统计正在进行和已完成个数

声明2个变量 :todocount 待办个数  donecount 已完成个数   当进行遍历本地存储数据的时候, 如果 数据done为 false, 则 todocount++, 否则 donecount++。

	//统计事项
		$("#todocount").html(todoCount);
		$("#donecount").html(doneCount);

 todolist.js完整代码

$(function() {
	load();
	// 1.按下回车,把完整数据存放在本地存储里面
	$("#title").on("keydown",function(e) {
		if(e.keyCode===13) {
			if ($(this).val().trim()==="") {
				alert("请输入您想要的操作");
			}else {
				//读取本地存储内容
				var local=getLocal();
				//新内容追加给本地存储里:先追加给对象,对象再转化为字符串放入本地存储
				local.push({title:$(this).val(),done:false});
				// console.log(local)
				// localStorage.setItem("todolist",JSON.stringify(local));
				saveLocal(local);
				//2.本地存储数据渲染到页面中
				load();
				//优化
				$(this).val("");                 
			}	
		}
	})
		//3.删除操作:先获取本地存储数据,删除对应的数据,保存给本地存储,重新渲染列表li
	$("ol,ul").on("click","a",function(e) {
		var local= getLocal();
		// console.log(local)
		var index=$(e.target).attr("id");
		// console.log(index)
		local.splice(index,1);//存在bug
		saveLocal(local);
		load();
	})
		//4.正在进行和已经完成的选项操作
		// 当点击复选框,修改本地存储数据,再重新加载数据列表
	$("ol,ul").on("click","input",function(e) {
		var local= getLocal();
		var  index=$(e.target).siblings("a").attr("id")
		// console.log($(e.target).prop("checked"))
		local[index].done=$(e.target).prop("checked")
		// console.log(local)
		saveLocal(local);
		load();
		
	})
		//5.修改事项
		// $("ul,ol").on("dblclick","input",function(e) {
		// 	console.log('11')
				// $(e.target).text($(input).val());		
		// })	
	//读取本地存储内容
	function getLocal() {
		var data=localStorage.getItem("todolist")
		if(data!==null) {
			return JSON.parse(data);
		}else {
			return [];
		}	
	}
	//放入本地存储,注意形参的使用
	function saveLocal(data) {
		localStorage.setItem("todolist",JSON.stringify(data));
	}
	//渲染加载数据
	function load() {
		var todoCount=0;
		var doneCount=0;
		//把ol里面的内容清空
		$("ol,ul").empty();
		var data=getLocal();
		$.each(data,function(i,ele) {
			//注意自定义属性id的添加
			// var lis=$("<li><input type='checkbox'><p>"+ele.title+"</p><a href='javascript:;' id="+i+"></a></li>")
			//如果是true添加到ul已经完成事项中,如果是false则添加到ol正在进行事项中
			if(ele.done) {
				$("ul").prepend($("<li><input type='checkbox' checked='true'><p>"+ele.title+"</p><a href='javascript:;' id="+i+"></a></li>"));
				doneCount++;
			}else {
				$("ol").prepend($("<li><input type='checkbox'><p>"+ele.title+"</p><a href='javascript:;' id="+i+"></a></li>"));
				todoCount++;
			}
			
		})
		//统计事项
		$("#todocount").html(todoCount);
		$("#donecount").html(doneCount);
	}
	
	
})

运行结果:

 

 

举报

相关推荐

0 条评论