JS——webAPIs（5）_js本地浏览数据增加后const arr = json.parse(localstorage.get-CSDN博客

本文链接：https://blog.csdn.net/Axuangogo/article/details/137221689

一、知识点

1.延时函数 setTimeout()

    //延时函数，只出现一次
    let timer = setTimeout(function(){
      console.log('时间到了');
    },2000)
    //清除
    clearTimeout(timer)

2.JS执行机制

同步任务与异步任务

事件循环

先执行执行栈中的同步任务；
异步任务放入任务队列中；
当执行栈中的所有同步任务执行完毕，系统会依次读取任务队列中的异步任务；
被读取的异步任务结束等待状态，进入执行栈，开始执行。

3.location对象

    //location对象
    //利用js的方式跳转页面
    location.href='http://www.baidu.com'

4.navigator对象

5.history对象：前进、后退按钮

5.本地存储：只能存储字符串数字类型

    // localStorage，将数据永久存储在本地，除非手动删除
    // 存储数据，键值对
    localStorage.setItem('uname','pink')
    // 获取数据，键
    localStorage.getItem('uname')
    // 删除元素，键
    localStorage.removeItem('uname')
    // 修改元素，键值对
    localStorage.setItem('uname','red')
    
    // sessionStorage，生命周期为关闭浏览器

6.存储复杂数据类型

    // 由于本地存储只能存储字符串数字类型
    // 存：需要将复杂数据类型转换成JSON字符串
    const obj = {
      uname:'pink',
      age:18,
      gender:'女'
    }
    localStorage.setItem('obj',JSON.stringify(obj))
    //JSON对象 {"uname":"pink","age":18,"gender":"女"}

    // 取：把JSON字符串转换为对象
    console.log(JSON.parse(localStorage.getItem('obj')));

7.数组中的map和join方法

    // 数组中的map方法：处理数据，并返回一个数组
    arr.map(function(ele,index){
      return ele+'颜色'
    })//(元素,索引号)
    
    // 数组中的join方法：把数组中所有元素拼接为一个字符串
    arr.join()//默认逗号分隔
    arr.join('')//没有分隔符

二、综合案例

1. 5s跳转链接

<body>
  <a href="http://www.itcast.cn">支付成功<span>5</span>秒钟之后跳转到首页</a>
  <script>
    const a = document.querySelector('a')
    let num = 5
    let timeId = setInterval(function() {
      num--
      if (num === 0){
        clearInterval(timeId)
        //跳转链接
        location.href = 'http://www.itcast.cn'
      }
      a.innerHTML=`支付成功<span>${num}</span>秒钟之后跳转到首页`
    }, 1000);
  </script>
</body>

2.学生信息表案例

  <script>
    //参考数据
    const initData = [
      {
        stuId: 1,
        uname: '欧阳霸天',
        age: 19,
        gender: '男',
        salary: '20000',
        city: '上海',
      }
    ]
    //获取元素
    const tbody = document.querySelector('tbody')
    const info = document.querySelector('.info')
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const salary = document.querySelector('.salary')
    const gender = document.querySelector('.gender')
    const city = document.querySelector('.city')
    
    //读取本地存储的数据，如果没有数据则为空数组
    const arr = JSON.parse(localStorage.getItem('data')) || []
    
    //渲染页面模块：利用map和join
    function render(){
      //map遍历数组，返回对应的tr数组
      const trArr = arr.map(function(ele,index){
        return `
        <tr>
          <td>${ele.stuId}</td>
          <td>${ele.uname}</td>
          <td>${ele.age}</td>
          <td>${ele.gender}</td>
          <td>${ele.salary}</td>
          <td>${ele.city}</td>
          <td>
            <a href="javascript:" data-id=${index}>删除</a>
          </td>
        </tr>
        `
      })
      // 把数组转换为字符串join
      // 把生成的字符串追加给tbody
      tbody.innerHTML=trArr.join('')
    }
    render()
    
    //新增业务模块
    info.addEventListener('submit',function(e){
      //阻止默认事件
      e.preventDefault()
      //非空判断
      if (!uname.value || !age.value || !salary.value){
        return alert('输入内容不能为空！')
      }
      //追加数组对象
      arr.push({
        //新增加的stuId应该是数组中最后一条数据的stuId+1
        //一开始数组没有数据，则直接返回stuId为1
        stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value,
      })
      //渲染
      render()
      //清空表单
      this.reset()
      //把数组重新存入本地存储，防止刷新后数据丢失
      //刷新后：代码从上往下执行，本地存储后，回到开头读取本地数据代码处
      localStorage.setItem('data',JSON.stringify(arr))
    })

    //删除业务模块
    //采用事件委托，给tbody添加点击事件
    tbody.addEventListener('click',function(e){
      //判断是否点击的事删除按钮
      if (e.target.tagName === 'A'){
        //弹出确认框confirm
        if (confirm('确定要删除这条数据吗？')){
          //得到当前对象在数组中的索引号，并删除此对象
          arr.splice(e.target.dataset.id,1)
          //重新渲染
          render()
          //重新本地存储
          localStorage.setItem('data',JSON.stringify(arr))
        }
      }
    })
  </script>