本地存储
重新理解:
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);

}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐