Web APIs 5：Window对象（BOM）+本地存储

Web APIs 5（BOM：Window对象+本地存储）

1.BOM(浏览器对象模型)（后面几个对象都为BOM对象）

• BOM对象包含：navigator、location、document(DOM对象)、history、screen
• BOM是一个全局对象，即JS中的顶级对象，alert、console.log都是window的属性
• 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
• window对象下的属性和方法调用时可以省略window

2.定时器——延时函数

• setTimeout(回调函数，等待的毫秒数)：只执行一次，平时省略window，等待时间先执行后续代码
• 清除延时函数：
  • let 定时器编号 = setTimeout(回调函数，等待时间)
  • clearTimeout(定时器编号)
• 延时函数与间歇函数的区别：执行次数的不同

3.JS执行机制

• JS本身是单线程，同一时间只能做一件事，任务需要排队，前一个任务结束，后一个任务才能继续

• 单线程遇到类似定时器这种耗时任务，会出现阻塞——利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程。于是JS中出现同步，异步

• 同步异步

  • 同步：一件事做完再做另一件事
  • 异步：在做一件事的同时，由于花费时间较长，可以去处理其他事情
  • 同步任务：在主线程上执行，形成执行栈
  • 异步任务：通过回调函数实现，常见的异步任务有普通事件(click、resize)，资源加载(load、error)，定时器（setInterval、setTimeout)。异步任务添加到**任务队列（消息队列）**中。

• 执行过程（事件循环）

  • JS主线程先执行执行栈中的同步任务
  • 异步API将准备好的异步任务推入任务队列
  • 一旦执行栈中的所有同步任务执行完毕，系统会依次读取任务队列中的异步任务，再进入执行栈开始执行

• eg:

    //执行结果是 111 333 222
      console.log(111);
      setTimeout(function () {
        console.log(222);
      }, 0)
      console.log(333);
  

• 事件循环event loop简要概括：主线程不断的从任务队列获取任务，执行任务，再获取再执行，这种机制就成为事件循环

4.location对象

• 常用属性：

  • href：获取完整的URL地址，对其赋值时用于地址的跳转

  //运行后页面跳转到百度
      console.log(location.href);
      location.href = 'http://www.baidu.com'
  

  • search：获取地址中携带的参数（符号？后面部分）

   console.log(location.search)
  

  • hash：获取地址中的哈希值（符号#后面部分）：页面不跳转而是更换组件时使用

  console.log(location.hash)
  

• 常用方法：reload()：刷新当前页面，传入参数true时强制刷新

  <button class="reload">点击刷新</button>
    <script>
      let btn = document.querySelector('.reload')
      btn.addEventListener('click', function () {
        location.reload(true)
      })
  

5.navigator对象

• 作用：记录浏览器自身的相关信息
• 常用属性与方法：
  • userAgent：检测浏览器的版本和平台

6.history对象

• 作用：管理历史记录，该对象与浏览器地址栏的操作相对应
• 常用属性与方法：
  • back()：后退功能
  • forward()：前进功能
  • go(参数)：前进后退，若参数为1 ，则前进1个页面，若是-1，则后退1个页面

 <button>后退</button>
  <button>前进</button>
  <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>

7.本地存储

• 介绍：存储在用户浏览器中，读取、设置、甚至页面刷新不丢失数据，容量较大，sessionStorge和localStorage约5M左右

• localStorage：将数据永久存储在本地，除非手动删除

  • 特点：可以多窗口共享，以键值对的形式存储使用
  • 语法：()
    • 存储数据：localStorage.setItem(key,value)
    • 读取数据：localStorage.getItem(key)
    • 删除数据：localStorage.removeItem(key)

    //存
    localStorage.setItem('uname', '小小怪')
    //取
    let uname = localStorage.getItem('uname')
    console.log(uname);
    //改  key值在表中有的话就改变值，没有就新增
    localStorage.setItem('uname', '小小倩')
    //删除
    localStorage.removeItem('uname')
  

• sessionStorage

  • 特点：生命周期为关闭浏览器窗口，在同一个窗口下共享，其他同locaStorage
  • 语法也同localStorage

• 本地存储存储复杂数据

  • 方法：将复杂数据类型转换为JSON字符串，再存储到本地
  • 语法：
    • 对象转字符串：JSON.stringify(复杂数据类型)
    • 字符串转对象：JSON.parse(键)

   <script>
      const obj = {
        uname: '小小怪',
        age: 12,
        gender: '女'
      }
      //存 对象转字符串
      localStorage.setItem('obj', JSON.stringify(obj))
      //取 字符串转对象
      let n = JSON.parse(localStorage.getItem('obj'))
      console.log(n);
    </script>