基于JQuery的toDoList——最简单的代办事件列表
基于jquery的toDoList——最简单的代办事件列表
github网址: toDoList-JQuery
toDoList分析:
-
做到刷新页面不会丢失数据,因此我们的数据需要保存至本地localstorage里。
-
每次修改数据都要先从本地拿到数据,再把最新的数据渲染到页面上。
-
修改后再把最新的数据保存至localstorage,这样保证本地存储的是最新的数据。
-
存储的数据格式:var todolist = [{title: ‘晚上看电影。’, done:false}]。 其中title为事件内容,done表示事件是否完成。
-
注意一:本地存储localStorage里面只能存储字符串格式,因此需要把对象转换为字符串JSON.stringfy(data)。
-
注意二:获取本地存储数据,需要把里面的字符串转换为对象格式JSON.parse()我们才能使用里面的数据。
主要函数:
- getData():从本地获取数据
function getData() { //从本地获取数据
var data = localStorage.getItem('todolist');
if(data!==null)
return JSON.parse(data);//返回JSON格式的数据
else
return [];
}
- saveData(data):保存数据至本地中的todolist
function saveData(data) { //保存数据至本地中的todolist
localStorage.setItem('todolist',JSON.stringify(data));
}
- load():加载最新的数据渲染到html页面上(这个函数需要在页面加载完成后最先调用一次,把最新的数据加载出来)
function load() { //加载数据函数
var data = getData(); //通过getData函数获取数据
$('ol,ul').empty(); //清空列表
var num1=0;
var num2=0;
$(data).each( function (i,ele) { //循环data数据
if(ele.done) { //如果数据中的done为true,在ul已完成列表中添加一个li
$('ul').prepend("<li><input type='checkbox' checked='checked'><p>" + ele.title + "</p><a href='javascrip:;' id=" + i + ">-</a></li>");
num1++;
}
else { //如果数据中的done为false,在ol正在进行列表中添加一个li
$('ol').prepend("<li><input type='checkbox'><p>"+ele.title+"</p><a href='javascrip:;' id="+i+">-</a></li>");
num2++;
}
})
}
- 输入框回车按下事件,添加最新的待办事件
$('#title').keydown(function (event) { //回车键按下事件,添加最新事件
if (event.keyCode===13) {
var local = getData(); //获取本地数据保存至local数组中
local.push({title: $(this).val(), done: false}); //把最新数据添加到local数组中
saveData(local); //把local数组数据通过saveData函数保存至本地
load(); //重新加载数据
}
})
- a标签删除功能点击事件
$('ul,ol').on('click','a',function () { //给a标签(删除)绑定一个点击事件
var data=getData();
var i =$(this).attr('id'); //获取id
data.splice(i,1); //删除该数据
saveData(data); //保存数据
load(); //重新加载数据
})
- checkbox切换是否完成点击事件
$('ol,ul').on('click','input',function () { //给checkbox(切换是否完成)绑定一个点击事件
var data=getData(); //获取数据
var index=$(this).siblings('a').attr('id'); //获取id
data[index].done=$(this).prop('checked'); //让data数据中的checked值改为当前已修改的值
saveData(data); //保存数据
load(); //重新加载数据
})