原生js手撕todolist+本地存储

不管我们js有多少知识点和内容，其实都是离不开增 ，删，改，查

今天我用原生js来手写以下todolist的核心代码

1.首先我们先来简单写个布局吧。我写的是一个学生的信息。

思想：输入对应的信息点击添加 tbody标签里会出现刚才添加的信息，操作会有两个按钮分别来实现删除和编辑功能

   学号：
    <input type="text"></br>
    姓名：
    <input type="text"></br>
    年龄：
    <input type="text"></br>
    <button id="add">添加</button>
    <table border="1" >

        <tr>
           
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
    <tbody id="box">
        <!-- <tr>
            <td>学号</td>
           <td>姓名</td>
           <td>年龄</td>
           <td>操作</td>
         </tr> -->
    </tbody>
</table>

<!-- 这个是编辑框，首先要让他隐藏。当我们点击后面编辑时，让他显示 

 
-->
<div id="hidden" style="display: none;">学号：
    <input type="text"></br>
    姓名：
    <input type="text"></br>
    年龄：
    <input type="text"></br>
 <button onclick="wcHandel()" >完成</button>

2.下面就是js实现啦

<script>

       //定义一个空的数组，来存放添加的信息
        let stulist=[]
        //把存入本地的输入取出来
        let jsonlist=localStorage.getItem("stulist")
        //有数据的话直接渲染到页面
        if(jsonlist){
            stulist=JSON.parse(jsonlist)
            ranlist()
        }

        //本地存储
        //后面用得多，就封装一下吧
        function save(){
            localStorage.setItem("stulist",JSON.stringify(stulist))
        }

        //获取input框的值
        //增
        let ipts=document.querySelectorAll("input")
        let  addbtn=document.querySelector("#add")
        addbtn.onclick=function(){
            let number=ipts[0].value
            let name=ipts[1].value
            let age=ipts[2].value
        if(number&&id&&age){

            let obj={
                id:new Date(),
                number,
                name,
                age

            }
            //添加到数组中
            stulist.unshift(obj)
            save()
            ranlist()
            //每次添加之后把之前框里的内容清空
            ipts[0].value=''
            ipts[1].value=''
            ipts[2].value=''
            
        console.log(stulist)

        }else{
            alert("输入内容不能为空")
        }

        }
     //渲染列表
    function ranlist(){
    let brr= stulist.map( (v)=>`
        <tr>
               
                <td>${v.number}</td>
                <td>${v.name}</td>
                <td>${v.age}</td>
                <td><button onclick="patchHandel('${v.id}')">编辑</button><button onclick="delHandel('${v.id}')">删除</button></td>
         </tr>
     
     ` )
    document.querySelector("#box").innerHTML=brr.join('')
   }
    
  //删

  window.delHandel=function(sid){
    //点击删除时，过滤出来跟这个id不一样的所有元素，从新赋值给stulist
   stulist= stulist.filter((v)=>v.id!=sid)
   save()
   ranlist()
 }
//编辑
 window.patchHandel=function(uid){

    let hidden=document.querySelector("#hidden")
    let ipt=document.querySelectorAll("#hidden input")
    console.log(ipt)
    //编辑框显示
    hidden.style.display="block"
    //找到符合id的那组数据
    let item=stulist.find((v)=>v.id=uid)
    //把原来的值赋给编辑框
    pt[0].value=item.number
    ipt[1].value=item.name
    ipt[2].value=item.age
    //点完成按钮的时候
window.wcHandel=function(){
    

    item.number=ipt[0].value
    item.name=ipt[1].value
    item.age=ipt[2].value
    hidden.style.display="none"
    save()
    ranlist()

}



 }
 
    </script>

这样一个带有本地存储的todolist就写好了。