LocalStorage存储对象

本地存储
重新理解:
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('
  • ' + ele.title + '

  • '); doneCount++; } else { $('ol').prepend('
  • ' + ele.title + '

  • '); todoCount++; } }) $('#todocount').text(todoCount); $('#donecount').text(doneCount); }

    你可能感兴趣的:(干货满满,vue.js,javascript,前端)