todolist 包含本地存储知识
程序员文章站
2022-11-06 17:54:38
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>todolist_again</title>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.fat {
width: 500px;
height: 800px;
margin: 50px auto;
}
h1 {
font-size: 38px;
color: goldenrod;
display: inline;
margin-right: 40px;
/* vertical-align: middle; */
}
.todoinput {
width: 300px;
height: 50px;
line-height: 50px;
border-radius: 10px;
border: 2px solid rgb(245, 161, 102);
font-size: 28px;
text-align: center;
outline-style: none;
/* outline-color: brown; */
/* input获得焦点时，默认会出现一个蓝色外边框，设置outline属性，或者border属性，能清除该默认样式 */
}
h3 {
font-size: 34px;
float: left;
}
#todocount,#donecount {
width: 30px;
height: 40px;
line-height: 40px;
border-radius: 10px;
background: goldenrod;
display: block;
float: right;
margin-top: 2px;
text-align: center;
color:white;
}
.clearfix:after {
display: block;
height: 0;
line-height: 0;
content: "";
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}
.main {
margin-top: 40px;
margin-bottom: 20px;
}
li {
width: 100%;
background: olive;
border-radius: 7px;
height: 30px;
line-height: 30px;
margin-top: 10px;
list-style: none;
position: relative;
}
#donelist li{
opacity: .6;
}
.check {
width: 21px;
height: 21px;
margin-left: 10px;
vertical-align: middle;
}
.content {
color: white;
margin-left: 28px;
font-family: '宋体';
font-size: 18px;
}
.del {
width: 16px;
height: 16px;
border-radius: 7px;
background: orangered;
display: block;
position: absolute;
right: 8px;
top: 15px;
margin-top: -8px;
}
</style>
</head>
<body>
<section class="fat">
<section>
<!-- οnfοcus="this.placeholder=''" οnblur="this.placeholder='添加todo'" -->
<h1>todolist</h1><input type="text" placeholder="添加todo" class="todoinput">
</section>
<section class="main">
<section class="clearfix">
<h3>正在进行</h3><span id="todocount"></span>
</section>
<ol id="todolist">
<!-- <li>
<input type="checkbox" class="check"><span class="content">了jog了</span><a href="###" class="del"></a>
</li> -->
</ol>
</section>
<section class="main">
<section class="clearfix">
<h3>已完成</h3><span id="donecount"></span>
</section>
<ul id="donelist">
</ul>
</section>
</section>
<script>
$(function(){
// 每次刷新页面，都要直接显示原有的本地数据，即一刷新就将本地存储中已有的数据渲染到页面
load();
// input框获得焦点时，清空placeholder
$('.todoinput').focus(function() {
$(this).prop("placeholder","");
// $(this).attr("style",'background:rgba(224,150,150,0.3);');//设置获得光标时输入框的背景颜色
});
// input框失去焦点时，设置placeholder
$('.todoinput').blur(function() {
$(this).prop("placeholder",'添加todo');
// $(this).attr("style",'background:;');
});
// 读取本地存储的数据，更新本地存储数据，保存本地存储数据，将本地存储数据渲染到页面
$('.todoinput').on('keydown',function(e) {
// 回车事件
if(e.keycode===13) {
if($(this).val()=="") {
alert("输入内容不能为空！");
}else {
// 先获取本地存储中的数据
var local = getdata();
// 更新数据
local.push({title: $(this).val(),done:false});
// 更新后的数据保存到本地存储
savedata(local);
//渲染页面
load();
$(this).val("");// 回车后要将input框的内容清空
$(this).prop("placeholder",'添加todo');//回车后回复placeholder
// $(this).attr("style",'background:;');//回车后回复输入框背景颜色
// 回车后如何失去光标？？？？？？？？？？？？？？？？
}
}
});
// 读取本地存储数据
function getdata() {
var data = localstorage.getitem("list");//读取本地存储中的数据，注意本地存储的数据只能是字符串格式
// -------------console.log(typeof(data));//string
if(data !== null){//如果有数据，就将字符串数据转json对象并返回数据
return json.parse(data);//json.parse()里面必须是一个字符串 如果此处报错，可能是data为undefined，可能是本地存储中的数据格式错误，application清空数据即可
}else{//如果没有数据就返回一个空数组
return [];
}
}
// 保存本地存储数据 注意本地存储数据都是字符串类型
function savedata(param) {
localstorage.setitem("list",json.stringify(param));
};
// 加载本地存储数据渲染到页面中
function load() {
var hh = getdata();//获取本地数据，得到的是字符串数组
// 回车事件调用渲染方法时，每次都将本地存储的所有数据遍历一遍添加进列表，如果不先清除列表的话，再加载又会重新渲染一次之前的数据。所以：遍历本地存储之前，先将ul,ol的数据清空
$('ul,ol').empty();
// 计算正在进行的事件数量，已经完成的事件数量
var todocount=0;
var donecount=0;
// 遍历数组
$.each(hh,function(i,n) {
// 本地存储里的数据分两种，已经完成的和正在进行的
if(n.done==false){
// 如果遍历到的当前元素是正在进行的数据，放入对应的ol中
$('ol').prepend("<li><input type='checkbox' class='check'><span class='content'>"+n.title+"</span><a href='javascript:;' class='del' id="+i+"></a></li>");
todocount++;//每添加一个li,count加1
}else if(n.done==true) {
$('ul').prepend("<li><input type='checkbox' class='check' checked='false'><span class='content'>"+n.title+"</span><a href='javascript:;' class='del' id="+i+"></a></li>");
donecount++;
}
});
// 将count值赋值给span 注意用val()无效 一刷新页面就有数据，回车就有数据，所以写在load()里面
$('#todocount').text(todocount);
$('#donecount').text(donecount);
};
// 点击复选框，ul,ol的数据相互切换 修改done属性，done为false就是正在进行，done为true就是已完成
$('ul,ol').on('click','input',function() {
//获取本地存储数据
var data = getdata();
// 找到当前li所对应的本地存储中的数据，将该数据的done属性修改
var index = $(this).siblings('a').attr('id');//获取自定义属性用attr()
console.log($(this).prop('checked'));//被选中的复选框checked属性为true
console.log($(this).parent().siblings('li').children('input').prop('checked'));//未被选中的复选框checked属性为false
//-----------------将复选框的checked属性值赋给done false or true
// ？为什么点击正在进行的复选框不会勾选----------因为一点击，就重新渲染页面把该条数据给放到已完成列表了
data[index].done = $(this).prop('checked');
// 将具有新checked属性的数据保存在本地存储
savedata(data);
// 重新渲染页面
load();
});
// 点击a标签删除当前li ！！！！！！！！！！！！注意：不是删除页面元素，而是从本地存储中删除数据
$('ul,ol').on('click','a',function() {//注意！！！？？？？？直接用类名表示两个列表中的a标签会出问题，为什么？？？？？？？？？？？？？？？？？？？
var info = getdata();
// 获取到当前a的索引号，然后从本地存储中找到相对应索引号的数据，删除
var index = $(this).attr("id");
// 删除数组的某个元素用splice(数组下标,个数)
info.splice(index,1);//从索引index处开始，删除一个元素
savedata(info);
load();
});
})
</script>
</body>
</html>