【WEB APIs】BOM-操作浏览器-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_73805456/article/details/146302205

1. Window对象

1.1 BOM

    console.log(document === window.document); //true
    function fn() {
      console.log(11);
    }
    window.fn()
    var num = 10 //const let挂在自己的作用域内
    console.log(window.num);

1.2 定时器-延时函数

    const img = document.querySelector('img')
    setTimeout(function () {
      img.style.display = 'none'
    }, 3000)

1.3 JS执行机制

1.4 location对象

  //5秒后跳转
  <a href="http://www.itcast.cn"><span>5</span>秒后跳转</a>
  <script>
    const a = document.querySelector('a')
    let num = 5
    let timerId = setInterval(function () {
      num--
      a.innerHTML = `<span>${num}</span>秒后跳转`
      if (num === 0) {
        clearInterval(timerId)
        // 跳转
        location.href = 'http://www.itcast.cn'
      }
    }, 1000)
  </script>

1.5 navigator对象（复制）

立即执行函数

1.6 history对象

2. 本地存储（重点）

2.1 介绍

2.2 分类

localStorage

键一定记得加引号，不加当变量名看

本地存储只能存字符串类型

    // localStorage.setItem('键', '值') 键一定记得加引号 不加当变量名看
    localStorage.setItem('uname', 'hahah') //存储方式
    console.log(localStorage.getItem('uname')); //获取方式
    localStorage.removeItem('uname') //删除
    localStorage.setItem('uname', 'llll') //有键是修改
    //本地存储只能存字符串类型
    localStorage.setItem('age', 18)
    console.log(localStorage.getItem('age')); //18以字符串形式存储

sessionStorage

存储复杂数据类型

    const obj = {
      uname: '小明',
      age: 19,
      gender: '男'
    }
    // 1.复杂数据类型存储必须转换成JSON字符串存储
    localStorage.setItem('obj', JSON.stringify(obj))
    //JSON对象	{"uname":"小明","age":19,"gender":"男"}	
    // 2.把JSON字符串转换成对象
    console.log(JSON.parse(localStorage.getItem('obj')));

3. 综合案例—学生就业统计表

3.1 渲染业务

map()

join()

3.2 新增业务

3.3 新增业务

  <script>
    // 参考数据
    const initData = [
      // {
      //   stuId: 1,
      //   uname: '迪丽热巴',
      //   age: 22,
      //   salary: '12000',
      //   gender: '女',
      //   city: '北京',
      //   time: '2099/9/9 08:08:08'
      // }
    ]
    // localStorage.setItem('data', JSON.stringify(initData))
    // 1. 渲染业务
    // 1.1 先读取本地存储的数据
    const arr = JSON.parse(localStorage.getItem('data')) || []
    console.log(arr)
    // 1.2 利用map和join方法来渲染页面
    const tbody = document.querySelector('tbody')
    function render() {
      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>${ele.time}</td>
            <td>
              <a href="javascript:" data-id="${index}">
                <i class="iconfont icon-shanchu"></i>
                删除
              </a>
            </td>
          </tr>
        `
      })

      console.log(trArr)
      // join把数组转换为字符串 追加给tbody 
      tbody.innerHTML = trArr.join('')
      // 显示共计有几条数据
      document.querySelector('.title span').innerHTML = arr.length
    }
    render()

    // 2.新增业务
    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')
    info.addEventListener('submit', function (e) {
      e.preventDefault() // 阻止默认提交行为
      // 非空判断
      if (!uname.value || !age.value || !salary.value) {
        return alert('输入内容不能为空')
      }
      // 获取表单元素的值，并追加进数组中
      arr.push({
        stuId: arr.length ? +arr[arr.length - 1].stuId + 1 : 1, //确保id不重复 要考虑数组长度为0的情况
        uname: uname.value,
        age: age.value,
        salary: salary.value,
        gender: gender.value,
        city: city.value,
        time: new Date().toLocaleString()
      })
      render()
      this.reset() //重置表单

      // 把数组转为JSON字符串存入本地存储中
      localStorage.setItem('data', JSON.stringify(arr))
    })

    // 3.删除业务
    // 采用事件委托的形式，给tbody注册点击事件
    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        if (confirm('确认删除')) { //点击确定返回true，否则false
          arr.splice(e.target.dataset.id, 1) //通过自定义属性知道要删除数组的第几条元素
          render()
          localStorage.setItem('data', JSON.stringify(arr)) //数组更改，本地存储也改，要保证本地存储存最新数据
        }
      }
    })
  </script>