BOM：延时函数、JS执行机制、location对象、navigator对象、history对象、本地存储（存储、获取、删除、修改）、字符串拼接、map方法、join方法、综合案例-优快云博客

1、Window对象

1）BOM（浏览器对象模型）

2）定时器-延时函数

与间歇函数的区别：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      margin: 100px auto;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div></div>
  <script>
    const div = document.querySelector('div')
    setTimeout(function () {
      div.style.display = 'none'
    }, 3000)
  </script>
</body>

</html>

3）JS执行机制

（1）同步和异步

（2）同步任务和异步任务

（3）事件循环

由于主线程不断的重复获得任务、执行任务、再获得任务、再执行任务，所以这种机制被称为事件循环（event loop）。

  <script>
    console.log(1);

    setTimeout(function () {
      console.log(2);
    })
    console.log(3);
    console.log(4);

  </script>

4）location对象

location对象的数据类型是对象，它拆分并保存了URL地址的各个组成部分。

（1）hred属性

  <script>
    // console.log(window.location)
    // console.log(location) // 对象
    // console.log(location.href)
    // 跳转页面
    location.href = 'http://www.baidu.com'
  </script>

<body>
  <a href="http:///www.baidu.com">5秒之后跳转页面</a>
  <script>
    const a = document.querySelector('a')
    //开启定时器
    let num = 5
    let timerId = setInterval(function () {
      num--
      a.innerHTML = `${num}秒之后跳转页面`
      //倒计时结束，停止定时器，跳转页面
      if (num === 0) {
        clearInterval(timerId)
        location.href = 'http:///www.baidu.com'
      }
    }, 1000)
  </script>

（2）search属性

eg：可以拿到表单信息

（3）hash属性

hash属性获取地址中的哈希值，符号 # 后面部分

（4）reload方法

（5）总结

5）navigator对象

6）history对象

<body>
  <div>
    <button>后退</button>
    <button>前进</button>

  </div>
  <script>
    // 获取元素
    const back = document.querySelector('button:first-child')
    const forward = back.nextElementSibling
    back.addEventListener('click', function () {
      history.back()
    })
    forward.addEventListener('click', function () {
      history.forward()
    })
  </script>

2、本地存储

注意：本地存储只能存储字符串

1）介绍

2）分类

（1）localStorage

语法：

a.存储数据

// 存储数据
  localStorage.setItem(key, value)

eg:

<body>

  <script>
    localStorage.setItem('uname', '张三')
  </script>
</body>

b.获取数据

// 获取数据
  localStorage.getItem(key)

eg：

  <script>
    localStorage.setItem('uname', '张三')
    console.log(localStorage.getItem('uname'));

  </script>

c.删除数据

  // 删除数据  
  localStorage.removeItem(key)

eg：

  <script>
    localStorage.setItem('uname', '张三')
    console.log(localStorage.getItem('uname'));
    localStorage.removeItem('uname')
  </script>

d.修改数据

  <script>
    localStorage.setItem('uname', '张三')
    // console.log(localStorage.getItem('uname'));
    // localStorage.removeItem('uname')
    // 改 如果原来有这个键，就是修改数据；否则，就是增加数据
    localStorage.setItem('uname', '李四')
    console.log(localStorage.getItem('uname'));

  </script>

e.注意：

  <script>
    localStorage.setItem('uname', '张三')
    // console.log(localStorage.getItem('uname'));
    // localStorage.removeItem('uname')
    // 改
    localStorage.setItem('uname', '李四')
    console.log(localStorage.getItem('uname'));
    localStorage.setItem('uname', '张三')

    // 本地存储只能存储字符串数据类型
    localStorage.setItem('age', 18)
    console.log(localStorage.getItem('age'));

  </script>

(2)sessionStorage

3）存储复杂数据类型

存储复杂数据类型：

1. 使用 JSON.stringify() 方法将复杂数据类型转换为JSON字符串存储

2. 使用 JSON.parse() 把 JSON字符串转换为对象

JSON对象属性和值有引号，而且引号统一是双引号

  <script>
    const obj = {
      uname: '张三',
      age: 18,
      gender: '女'
    }
    // console.log(localStorage.getItem('obj'));
    // JSON.stringify() 方法
    // 复杂数据类型必须转换为JSON字符串存储
    localStorage.setItem('obj', JSON.stringify(obj))
    // console.log(typeof localStorage.getItem('obj'));

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

3、综合案例

业务：

1）字符串拼接--map、join方法

字符串拼接新思路：利用 map() 和 join() 数组方法实现字符串拼接

（1）map方法的基本使用 - 迭代数组

map可以遍历数组处理数据，并且返回新的数组。（注：forEach在JS进阶中会提到）

    <script>
        const arr = ['张三', '李四', '王五']
        // 得到数组元素
        arr.map(function (ele, index) {
            return ele + '！！！'
        })
        console.log(arr);

    </script>

（2）join方法的基本使用

    <script>
        const arr = ['张三', '李四', '王五']
        // 得到数组元素
        const newArr = arr.map(function (ele, index) {
            return ele + '！！！'
        })
        console.log(newArr);    // 字符串数组
        // newArr.join() 小括号为空则逗号分隔；小括号是空字符串，则元素之间没有分隔符
        console.log(newArr.join())
        console.log(newArr.join(''))
        console.log(newArr.join('、'))

    </script>

（3）数组中map + join方法渲染页面

思路：map遍历数组处理数据生成对应数据的 tr，再将数据填充进去，返回一个数组；我们没有办法将数组直接追加给 tbody ，因此我们需要通过 join 方法将数组转换成字符串，再追加给tbody。

2）渲染页面

我们使用localStorage读取本地数据：如果有数据，就转换为对象放到变量中；否则用默认空数组 [ ]。

再根据数据渲染页面：使用map方法遍历数组，得到数组后，通过join方法把map返回的数组转换为字符串，最后通过innerHTML将字符串赋值给tbody。

3）新增业务

1. 给 form表单注册事件，要阻止默认提交事件

2. 非空判断：如果录入信息的值有一个为空，则提醒并中断程序

3. 给 arr数组追加对象，存储从表单中获取到的数据

4. 渲染页面并重置表单（reset方法），并将 arr中的数据存在本地存储中，记得转换为 JSON 字符串

4）删除业务

1. 采取事件委托形式，给tbody注册点击事件（由于我们会有新的数据产生，直接给按钮注册点击事件，我们无法知道有几个删除按钮，没办法单独注册事件）0

2. 得到当前点击的索引号。渲染数据时，动态给a链接添加自定义属性 data-id

3. 根据索引号，利用 splice 删除数组中的这条数据

4. 重新渲染页面，把最新的 arr 数组存入本地存储

5）stuId的处理

1. 新增加序号应该是最后一条数据的stuId +1：数组[ 数组的长度 - 1 ].stuId + 1

2. 如果没有数据则直接赋值为1

6）代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_5020741_qhgukihoz39.css">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
      color: #721c24;
    }

    h1 {
      text-align: center;
      color: #333;
      margin: 20px 0;

    }

    .title {
      width: 933px;
      height: 50px;
      line-height: 50px;
      padding-right: 15px;
      border: 1px solid #ebebeb;
      margin: 10px auto;
      background-color: #f2f2f2;
      text-align: right;
    }

    .title span {
      display: inline-block;
      vertical-align: middle;
      height: 20px;
      margin: -3px 5px 0;
      text-align: center;
      line-height: 20px;
      color: #f26934;
      font-weight: 700;
    }

    table {
      margin: 0 auto;
      width: 950px;
      border-collapse: collapse;
      color: #3c3637;
    }

    th {
      padding: 10px;
      background: #f2f2f2;
      font-size: 18px;
      text-align: left;
    }

    td,
    th {
      border: 1px solid #ebebeb;
      padding: 15px;
    }

    td {

      color: #666;
      font-size: 16px;

    }

    tbody tr {
      background: #fff;
    }

    tbody tr:hover {
      background: #fbfafa;
    }

    tbody a {
      display: inline-block;
      width: 80px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #fff;
      background-color: #f26934;
    }

    .info {
      width: 900px;
      margin: 50px auto;
      text-align: center;
    }

    .info input,
    .info select {
      width: 100px;
      height: 30px;
      outline: none;
      border: 1px solid #ebebeb;
      padding-left: 5px;
      box-sizing: border-box;
      margin-right: 10px;
    }

    .info button {
      width: 70px;
      height: 30px;
      background-color: #5dbfd8;
      outline: none;
      border: 0;
      color: #fff;
      cursor: pointer;
      font-size: 14px;
    }

    .info button:hover {
      background-color: #52abc1;
    }
  </style>
</head>

<body>
  <h1>学生就业统计表</h1>
  <form class="info" autocomplete="off">
    <input type="text" class="uname" name="uname" placeholder="姓名" />
    <input type="text" class="age" name="age" placeholder="年龄" />
    <input type="text" class="salary" name="salary" placeholder="薪资" />
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    <select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="杭州">杭州</option>
    </select>
    <button class="add">
      <i class="iconfont icon-tianjia"></i> 添加
    </button>
  </form>

  <div class="title">共有数据<span>0</span>条</div>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>录入时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
          <td>1</td>
          <td>迪丽热巴</td>
          <td>23</td>
          <td>女</td>
          <td>12000</td>
          <td>北京</td>
          <td>2099/9/9 08:08:08</td>
          <td>
            <a href="javascript:">
              <i class="iconfont icon-shanchu"></i>
              删除
            </a>
          </td>
        </tr> -->
    </tbody>
  </table>
  <script>
    const date = {
      stuId: 1,
      uname: '李四',
      age: 18,
      gender: '男',
      salary: '12000',
      city: '杭州',
      time: '2025/9/30 08:30:32'
    }
    // 本地存储数据
    //localStorage中存储的是单个对象而不是数组,
    //存储一次后，给注释，否则当在表格中录入信息后，再次刷新页面，本地存储的数据会被覆盖
    // localStorage.setItem('date', JSON.stringify([date]))
    // console.log(localStorage.setItem('obj', JSON.stringify(data)));

    // 1. 根据持久化数据 渲染业务
    // 1) 读取本地存储数据
    // 如果有数据，就转换为对象放到变量中；否则用默认空数组 [ ]
    const arr = JSON.parse(localStorage.getItem('date')) || [] // 逻辑或中断
    console.log(arr);
    // 2) 渲染页面
    // map+join
    const tbody = document.querySelector('tbody')

    function render() {
      // map() 方法
      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.innerHTML = trArr.join('')
      // // 几条数据
      document.querySelector('.title span').innerHTML = arr.length
    }
    render()
    // 新增业务
    const info = document.querySelector('.info')
    const uname = document.querySelector('.uname')
    const age = document.querySelector('.age')
    const gender = document.querySelector('.gender')
    const salary = document.querySelector('.salary')
    const city = document.querySelector('.city')

    info.addEventListener('submit', function (e) {
      e.preventDefault()
      // 非空判断
      if (!uname.value || !age.value || !salary.value) {
        return alert('输入内容不能为空')
      }
      // 给 arr 追加对象
      arr.push({
        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,
        time: new Date().toLocaleString()
      })
      // 渲染页面 重置表单
      render()
      this.reset()
      // 将 arr中的数据存在本地存储中，记得转换为 JSON 字符串
      localStorage.setItem('date', JSON.stringify(arr))
    })
    // 删除业务
    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        if (confirm('您确定要删除这条数据吗？')) {
          // e.target.dataset.id 删除哪一条数据
          arr.splice(e.target.dataset.id, 1)
          // 重新渲染页面
          render()
          // 将 arr 数组存入本地存储中
          localStorage.setItem('date', JSON.stringify(arr))
        }

      }
    })
  </script>
</body>

</html>