BOM&本地存储

BOM

BOM（Browser Object Model）是浏览器对象模型

• window 对象是一个全局对象，也可以说是 JavaScript 中的顶级对象
• 像 document、alert()、console.log() 这些都是 window 的属性，基本 BOM 的属性和方法都是 window 的
• 所有通过 var 定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法
• window 对象下的属性和方法调用的时候可以省略 window

定时器 - 延时函数

• JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

• 语法：

  setTimeout(回调函数, 等待的毫秒数)
  

• setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，可以省略window

• 清除延时函数：

  let timeout = setTimeout(回调函数, 等待的毫秒数)
  clearTimeout(timeout)
  

• 延时器需要等待，所以后面的代码先执行

• 每一次调用延时器都会产生一个新的延时器

和定时器 setInterval() 的区别：执行的次数不同

• 延时函数：执行一次
• 间歇函数：每隔一段时间就执行一次，除非手动清除

js 执行机制

同步任务

所有任务都到主线程上，形成一个执行栈

异步任务

JS 的异步是通过回调函数实现的，一般而言，异步任务有以下三种类型：

• 普通事件，如 click、resize 等
• 资源加载，如 load、error 等
• 定时器，包括 setInterval、setTimeout 等

异步任务相关添加到任务队列中（任务队列也称为消息队列）

事件循环

js 执行机制如下：

1. 先执行执行栈中的同步任务
2. 异步任务放入任务队列中
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

具体的执行流程如下：

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

location 对象

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

常用属性和方法：

• href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
• search 属性获取地址中携带的参数，符号 ？后面部分
• hash 属性获取地址中的啥希值，符号 # 后面部分
• reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

navigator 对象

navigator 对象下记录了浏览器自身的相关信息

常用属性和方法：属性 userAgent 检测浏览器的版本及平台

history 对象

history 对象主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

常用属性和方法：

• back()：导航到历史记录中的上一个页面，相当于点击浏览器的返回按钮
• forward()：导航到历史记录中的下一个页面，相当于点击浏览器的前进按钮
• go(n)：导航到相对于当前页面的指定位置，其中 n 可以是正数（向前导航）或负数（向后导航）

本地存储

本地存储介绍：

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

分类

localStorage

• 作用：可以将数据永久存储在本地（用户的电脑）， 除非手动删除，否则关闭页面也会存在

• 特点：

  • 可以多窗口（页面）共享（同一浏览器可以共享）
  • localStorage 是基于域名和协议的，子域名可以共享数据，但是不同的网址（域名和协议组合）会有不同的 localStorage 存储空间，它们之间是相互隔离的，不能共享数据
  • 以键值对的形式存储使用
  • 本地存储只能存储字符串数据类型

• 语法：

  • 存储数据：localStorage.setItem(key, value)
  • 获取数据：localStorage.getItem(key)
  • 删除数据：localStorage.removeItem(key)

浏览器查看本地数据：

sessionStorage

生命周期为关闭浏览器或标签页窗口，其他用法跟 localStorage 基本相同

存储复杂数据类型

• 问题：本地只能存储字符串，无法存储对象
• 解决：需要将对象转换成 JSON 字符串，再存储到本地
• 语法如下：
  • JSON.stringify(对象)
  • JSON.parse(JSON字符串)