系列文章目录
将正在进行和已经完成的内容列表项保存在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();
})