APIs学习记录之BOM操作，学生信息表（本地存储）

APIs学习记录之BOM操作-Window对象，延迟函数，JS执行机制，location对象，navigator对象，history对象，本地存储。

一. 知识储备

1）Window对象

1. JS中的顶级对象
2. 像document, alert(), console.log() 都是Window的属性
3. var定义在全局中的变量和函数都是Window的属性和方法

2）定时器-延时函数

setTimeout( 回调函数, 延迟时间)延迟时间后只执行一次
setInterval( 回调函数, 延迟时间)隔一段时间执行一次

3）JS执行机制（了解，下面是我的记忆，maybe错乱

JS是单线程的，这样会有一个问题，会出现页面渲染不连贯，加载阻塞的问题。H5推出同步异步来解决这个问题，普通的任务就是同步任务，需要一定加载时间的，比如load(), click, setInterval()之类的任务是异步任务。
执行机制：

1. 先执行执行栈里的同步任务
2. 异步任务放到任务队列中
3. 执行完同步任务后，异步任务进入执行栈执行
4. 循环

4）location对象

拆分并保存了URL地址的各个组成部分

属性	功能
href	完整的URL地址，跳转页面
search	地址中携带的参数，符号？+ 后面的部分
hash	地址中的哈希值，符号# + 后面的部分，应用于部分页面刷新

方法	功能
reload（）	重新加载，传入参数true表示强制刷新

5）navigator对象

记录了浏览器本身的信息
eg:const userAgent = navigator.userAgent // 用于验证用户设备之类

6）history对象

管理历史记录，与浏览器的地址栏的操作（前进，后退）相对应
实际开发比较少用，OA办公系统会见到

// 前进一页
history.forward() 
history.go(1)
// 后退一页
history.back()
history.go(-1)

7）本地存储（重要的哦）（浏览器小仓库）

why：原本页面刷新数据会丢失，有很多时候需要保留数据

• 数据存储在用户浏览器中
• 设置，读取方便，甚至页面刷新不丢失数据
• 容量较大

7.1 localStorage介绍
刷新和关闭页面数据都不会消失，存储的是字符串
语法：
localStorage.setItem( key, value ) // 存储数据
localStorage.getItem( key ) // 获取数据
localStorage.removeItem( key ) // 删除数据

7.2 sessionStorage介绍
关闭页面数据会被清除，刷新页面不会
使用方法基本相同，同上

7.3 localStorage存储复杂数据类型
why：本地存储只能存储字符串，无法存储复杂数据类型
how：把复杂数据类型转换为JSON字符串存储在本地
语法：
eg：localStorage.setItem( 'obj', JSON.stringify( obj ) )
eg: JSON.parse( localStorage.getItem( 'obj' ) )

8）数组操作，map和join方法

map遍历数组处理数据，并返回新数组
join把数组中所有元素用参数分隔符拼接成一个字符串

二. 学生信息表（本地存储）

1. 准备阶段，获取元素

    const data = localStorage.getItem('data')
    // 从本地存储中取出到arr数组中,如果本地无数据，则为空数组
    const arr = data ? JSON.parse(data) : []
    // 获取tbody元素
    const tbody = document.querySelector('tbody')

2. 渲染模块

    function render() {
        const trArr = arr.map(function (ele, index) {
        // map遍历数组为td还有删除模块的自定义属性赋值
        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> 
        `
      })
      tbody.innerHTML = trArr.join()
    }
    render()

3. 录入模块

    // 获取表单元素
    const info = document.querySelector('.info')
    // 获取表单form 里面带有 name属性的元素
    const items = info.querySelectorAll('[name]')
    // 点击事件
    info.addEventListener('submit', function (e) {
      // 阻止提交
      e.preventDefault()
      // 声明空的对象
      const obj = {}
      // 判断数组里是否有对象，有的话ID为最后一个学生的ID+1，没有的话赋值为1
      obj.stuId = arr.length ? arr[arr.length - 1].stuId + 1 : 1
      // 非空判断
      for (let i = 0; i < items.length; i++) {
        const item = items[i]
        if (items[i].value === '') {
          return alert('输入内容不能为空')
        }
        // 赋值
        obj[item.name] = item.value
      }
      arr.push(obj)
      //  把数组 arr 存储到本地存储里面
      localStorage.setItem('data', JSON.stringify(arr))
      // 渲染页面
      render()
      // 重置表单
      this.reset()
    })

4. 删除模块（事件委托）

    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        // 删掉对应数据
        arr.splice(e.target.dataset.id, 1)
        localStorage.setItem('data', JSON.stringify(arr))
        render()
      }
    })