Day30：每天一个小练习 - JS30-15-LocalStorage

参考资料：
Alex老师的教学
PJCHENder笔记
JS30-Day15-LocalStorage

toDoList

先抓节点

const addItems = document.querySelector('.add-items'); //form
const itemsList = document.querySelector('.plates'); // ul
const items = JSON.parse(localStorage.getItem('items')) || [];
// 取出localStorage的资料并由字串转为物件
// items是localStorage内的资料夹名称
// 这样写也可以
// items = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];

作出画面

let createList = (data = [], dom) => {
    // 针对容器做资料处理
    dom.innerHTML = data
        .map((item, index) => {
            //  <input type="checkbox" data-index="1" id="item1" checked} />
            return `
        <li>
            <input type="checkbox" data-index="${index}" id="item${index}" ${item.done ? 'checked' : ''} />
            <label for="item${index}">${item.text}</label>
        </li>
        `;
        })
        .join('');//字串化
};

createList(items, itemsList);
// (localStorage资料, ul位置)

输入内容

let addItem = e => {
    e.preventDefault(); //挡住form表单的内建动作，否则会跳到action的连结
    let input = e.target.querySelector('[name=item]'); //输入框
    // e.target 可以换成 this ，但this不建议用箭头函式
    // 此处可以用this.querySelector('input:first-child')
    // name改的机率不高，建议用name

    let obj = { text: input.value, done: false }; //传入的物件样式
    items.push(obj); // 更新JS资料
    //和上方合并成items.push({ text, done: false });也OK

    localStorage.setItem('items', JSON.stringify(items)); // 更新localStorage资料

    e.target.reset(); //清空输入框
    // 可以用this.reset();
    // reset()针对form表单

    createList(items, itemsList); //更新画面
};
addItems.addEventListener('submit', addItem); //加入内容的按钮
// 题目提供的节点是form表单，不是里面的按钮

纪录li前方图示的切换

let toggleItem = e => {
    //  console.log(e.currentTarget, e.target);
    if (!e.target.matches('input')) {
        //阻挡不是input的内容，避免重复触发
        return;
    }
    let index = e.target.dataset.index;
    items[index].done = !items[index].done;//更新JS资料
    // 点击时true变成false，反之亦然
    localStorage.setItem('items', JSON.stringify(items)); // 更新localStorage资料
    createList(items, itemsList); //更新画面
};;
itemsList.addEventListener('click', toggleItem); //整个ul

预设的CSS有个很有趣的地方，点击时会切换图案，而且此图案直接写在CSS内。

.plates input + label:before {
  content: "⬜️";
  margin-right: 10px;
}

.plates input:checked + label:before {
  content: "?";
}

想要换图案可以去EMOJIALL找找看是否有喜欢的

连结