2021-01-09

系列文章目录

将正在进行和已经完成的内容列表项保存在cookie中，做持久存储，下一次访问页面的时候，仍可以看到以前的列表项内容。

---

二、使用步骤

1.引入插件

im
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>

2.读入样式

代码如下（示例）：

*{
	margin:0;
	padding:0;
}
a{
	text-decoration: none;
}
ul,ol{
	list-style: none;
}
input{
	outline: none;
}
.container{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	width:600px;
	background-color: gainsboro;
}
.header{
	height:50px;
	background-color: black;
	padding:0 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header .header-left{
	color: gainsboro;
	font-size:25px;
}
.header .header-right input{
	background-color: whitesmoke;
	border-radius: 10px;
	width:290px;
	height:27px;
}
.tool-realize .realizing-title-left{
	font-size:22px;
	color: black;
	font-weight: bold;
}
.tool-realize{
	padding:0 15px;
	min-height: 50px;
}
.tool-realize .realizing-title{
	display: flex;
	margin:20px 0;
	justify-content: space-between;
	align-items: center;
}
.tool-realize .realizing-title-right{
	width:20px;
	height:20px;
	background-color: whitesmoke;
	border-radius: 50%;
	text-align: center;
	line-height: 20px;
	color: grey;
}
.realizing-container li{
	width:100%;
	background-color: white;
	height: 35px;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	margin-bottom: 10px;
	border-radius: 7px;
}
.realizing-container li em{
	font-style: normal;
	background-color:#009688c7;
	border-radius: 7px;
	display: block;
	width:3px;
	height: 100%;
}
.realizing-container li input{
	margin:0 15px;
}
.realizing-container li p{
	width:497px;
	height: 35px;
	line-height: 35px;
	overflow: hidden;
	
}
.realizing-container li a{
	display: inline-block;
	width:19px;
	height: 19px;
	background-color: white;
	border-radius: 50%;
	border:1px solid gainsboro;
	position: relative;
	
}
.realizing-container li a span{
	text-align: center;
	line-height: 16px;
	position: absolute;
	top:0;
	left:0;
	bottom: 0;
	right: 0;
	margin: auto;
	width:16px;
	height: 16px;
	color: white;
	border-radius: 50%;
	background-color: gainsboro;
}

3.读入数据

代码如下（示例）：

$(function(){
	$(".header .header-right input").keydown(function(evt){
	let e=evt|| event;
	let keyValue=e.charCode || e.keyCode || e.which;
	if(keyValue==13 && $(".header .header-right input").val()){
		let str=`<ul>
					    	<li>
					    		<em></em>
					    		<input type="checkbox"  />
					    		<p>${$(".header-right input").val()}</p>
					    		<a ><span>-</span></a>
					    	</li>
					    </ul>`;
		$("#realizingContainer").append(str);			    
		addNode();
		deleteNode();
		$(".header .header-right input").val("");
	}
	success();
})
	 
	function success(){
		    $("#realizingContainer ul li input[type=checkbox]").click(function(){
			$(".tool-success .success-container").append($(this).parent().parent());
			addNode();
			addNode2();
			deleteNode2();
	      })
		    
	}
	
	function deleteNode(){
		$("#realizingContainer ul li a").click(function(){
			$(this).parent().remove();
	    addNode();
		})
		
	}
	function addNode(){
		   let len=$("#realizingContainer ul li").length;	
			$("#realizingTitle .realizing-title-right span").html(len);
		
	}
    function deleteNode2(){
    	   $(".success-container ul li a").click(function(){
			$(this).parent().remove();
	        addNode2();
		})
    }
	function addNode2(){
		   let len=$(".success-container ul li").length;
			$(".success-right span").html(len);
		
	}
	
	
	
	//保存在cookie中
	function setcookie(){
		        $.removeCookie("inputValue");
				let len=$("#realizingContainer p").length;
				for(let i=0;i<len;i++){   
					if($.cookie("inputValue")){
						$.cookie("inputValue",$.cookie("inputValue")+";"+$("#realizingContainer p").eq(i).html(),{expires:999});
					}else{
						$.cookie("inputValue",$("#realizingContainer p").eq(i).html(),{expires:999});
					}
				}
	   }
    function setcookie2(){
		        $.removeCookie("successValue");
				let len=$(".success-container ul li p").length;
				for(let i=0;i<len;i++){   
					if($.cookie("successValue")){
						$.cookie("successValue",$.cookie("successValue")+";"+$(".success-container ul li p").eq(i).html(),{expires:999});
					}else{
						$.cookie("successValue",$(".success-container ul li p").eq(i).html(),{expires:999});
					}
				}
	   }

	function getCookie(){
		if($.cookie("inputValue")){
			let cookieValue=$.cookie("inputValue");
			let cookieSingle=cookieValue.split(";");
			for(let i=0;i<cookieSingle.length;i++){
				let strCookie=`<ul>
					    	<li>
					    		<em></em>
					    		<input type="checkbox"  />
					    		<p>${cookieSingle[i]}</p>
					    		<a ><span>-</span></a>
					    	</li>
					    </ul>`;
		     $("#realizingContainer").append(strCookie);	
			}
			
		}
		addNode2();
		deleteNode2();
		success();
	}
	function getCookie2(){
		if($.cookie("successValue")){
			let cookieValue=$.cookie("successValue");
			let cookieSingle=cookieValue.split(";");
			for(let i=0;i<cookieSingle.length;i++){
				let strCookie=`<ul>
					    	<li>
					    		<em></em>
					    		<input type="checkbox" checked />
					    		<p>${cookieSingle[i]}</p>
					    		<a ><span>-</span></a>
					    	</li>
					    </ul>`;
		     $(".success-container").append(strCookie);	
			}
			
		}
		addNode2();
		deleteNode2();
	}
	$(window).bind("beforeunload",function(){
		setcookie();
		setcookie2();
	})
	getCookie();
	getCookie2();
})