本地存储
重新理解:
LocalStorage 只能存储字符串格式
如果你存储的是对象,你需要用JSON.stringify(包裹)然后取这个存储的字符串的时候,如果你取只能取到字符串
所以你需要把字符串弄成对象,需要用 JSON.parse()
//读取本地存储的数据
function getData() {
var data = localStorage.getItem('todolist');
if (data != null) {
// 本地存储里面的数据是字符串格式的,但我们需要的是对象格式
return JSON.parse(data);
} else {
return [];
}
}
//保存本地存储数据
function saveData(data) {
localStorage.setItem('todolist', JSON.stringify(data));
}
// 3.删除操作
$('ol,ul').on('click', 'a', function () {
// 先获取本地存储
var data = getData();
// 删除数据
var index = $(this).attr('id');
// console.log(index);
data.splice(index, 1);
// 保存到本地存储
saveData(data);
// 重新渲染页面
load();
})
function load() {
var todoCount = 0;//正在进行的个数
var doneCount = 0;//已经完成的个数
// 先读取本地存储数据
var data = getData();
console.log(data);
// 遍历之前先清空ol,ul里面的内容
$('ol,ul').empty();
// 遍历这个数据
$.each(data, function (i, ele) {
// console.log(ele);
if (ele.done) {
$('ul').prepend('<li><input type="checkbox" checked="checked"><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').text(todoCount);
$('#donecount').text(doneCount);
}