目录

  • html和css代码
  • 1 实现点击input输入框添加任务
  • 2 存储所添加的任务
  • 3 实现点击点击任务切换任务效果


html和css代码

<style>
        .fun{
            background-color: red;
            text-decoration: line-through;
            }
    </style>
</head>
<body>
<ul class='nav' id="nav">
    <li><span>榴莲</span></li>
    <li><span>臭豆腐</span></li>
    <li><span>鲱鱼罐头</span></li>
    <li><span>大猪蹄子</span></li>
</ul>
<form>
    <input type="text" placeholder="请输入文字" >
    <button >提交</button> <!--type="button"-->
</form>
</body>

1 实现点击input输入框添加任务

首先获取元素并创建本地存储ls

window.addEventListener('load',function (){
        let ls=localStorage;   //添加本地存储
        let input=document.querySelector('input');
        let button=document.querySelector('button');
        let ul=document.querySelector('ul');

然后为button添加点击事件（这是为button添加阻止默认操作，因为button在form里面，会自动提交刷新页面。其实为input添加type="button"也可以实现同种效果。）
整体思路就是
1 先判断input是否输入为空，若为空就弹出提示框，否则就继续执行操作。
2 清空每次输入input后的值
3 创建一个li标签，用来做新任务
4 把input输入的值inputValue添加到新建li标签中
5 把新建li标签添加到ul标签中，实现新任务的添加

button.addEventListener('click',(e)=>{
            e.preventDefault(); //阻止button点击事件的默认操作
            /*添加和存储任务*/
            if (input.value==''){alert('请输入数据')} //判断input是否输入为空

            else {
                let inputValue = input.value;//把input输入的值赋值给inputValue
                input.value = ''; //清空每次输入input后的值
                let newLi = document.createElement('li'); //创建一个li标签，用来做新任务
                newLi.innerHTML = '<li>' + '<span>'+inputValue+'</span>' + '</li>';//把input输入的任务放到li标签上，实现新任务的创建
                ul.appendChild(newLi); //把新建li标签添加到ul标签里，实现新任务的添加

2 存储所添加的任务

1 使用Array.from()方法，把ul.querySelectorAll(‘span’)所选中的ul下的所有span标签的伪数组全部转换成真数组
2 利用map方法实现把数组中每一元素在innerHTML中的书写（也就是input输入的任务）都储存到一个数组里面
3 以键值对的形式转换成JSON格式，实现把所有任务存储到本地存储

let cunChuArrs = Array.from(ul.querySelectorAll('span')); //把ul下面的所有li标签的伪数组转换成真数组
                console.log(cunChuArrs)   //[li, li, li, li, li] Array
               
                let cunChuArr = cunChuArrs.map(e => e.innerHTML);  //????map箭头用法 利用map方法实现把真数组里面所有元素在innerHtml中的书写（也是所有的任务，包括新建任务）都存储到一个新数组里面
                console.log(cunChuArr); //['榴莲', '臭豆腐', '鲱鱼罐头', '大猪蹄子', '456']  Array
               
                // console.log(JSON.stringify(cunChuArr)) //["榴莲","臭豆腐","鲱鱼罐头","大猪蹄子","<li>123</li>"]
                ls.setItem('cunchushuju', JSON.stringify(cunChuArr));//以键值对的形式转换成JSON格式把所有任务命名为cunchushuju存储到本地存储
            

        });//button点击事件结尾

3 解析本地存储（解析本地存储放在button点击事件之前。因为我们要先判断本地存储是否有存储数据，若有存储数据，就调用存储数据，若没有，就判断input添加新任务）
1 首先用if语句判断是否有本地存储，然后用Json.parse解析ls.getItem(‘’),转换成普通数组
2 定义一个空字符串，然后对解析后的数组arr遍历操作实现字符串的拼接s+=‘<li><span>‘+ele+’</span></li>’，然后把新字符串赋值给ul.inneHTML打印到Document页面中，实现存储数据的添加

<script>
    window.addEventListener('load',function (){
        let ls=localStorage;   //添加本地存储
        let input=document.querySelector('input');
        let button=document.querySelector('button');
        let ul=document.querySelector('ul');
        // console.log(ul.children);
        // console.log(ul.childNodes);
        // var arr=Array.from(ul.childNodes); //将节点列表转化成真数组
        // console.log(arr);
        /*解析存储任务*/

        if (ls.getItem('cunchushuju')){
            //console.log(ls.getItem('cunchushuju'))
            let arr=JSON.parse(ls.getItem('cunchushuju'));
           // console.log(arr);
            /*添加存储任务*/
            var s='';
            arr.forEach((ele)=>{
                 s+='<li><span>'+ele+'</span></li>';
                //console.log(s);
            })
            ul.innerHTML=s;

        };
        ul.addEventListener('click',function (e){   //委托事件
            // console.log(e.target)
            e.target.classList.toggle('fun');
        })

3 实现点击点击任务切换任务效果

用委托事件实现选中ul绑定所有的li,使用classList.toggle()切换类名，实现改变任务的状态

ul.addEventListener('click',function (e){   //委托事件
            // console.log(e.target)
            e.target.classList.toggle('fun');
        })