window 对象

BOM(浏览器对象模型)

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

window 对象组成：

• document
• location
• navigation
• history
• screen

定时器-延迟函数

语法：

1
2
3
4

// 设置延迟函数
let timerId = setTimeout(function () {}, 1000)
// 清除延迟函数
clearTimeout(timerId)

延迟函数与间歇函数对比：

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

Js 执行机制

• JavaScript 语言的一大特点就是单线程
• HTML5 提出Web Worker标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步
• 同步任务都在主线程上执行，形成一个执行栈
• 异步任务相关添加到任务队列中
• 先执行执行栈中的同步任务，一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

异步任务分类：

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

location 对象

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

常用属性和方法：

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

navigator 对象

navigator 的数据类型是对象，该对象下记录了浏览器自身的相关信息

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 检测 userAgent（浏览器信息）
!(function () {
  const userAgent = navigator.userAgent
  // 验证是否为Android或iPhone
  const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
  const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
  // 如果是Android或iPhone，则跳转至移动站点
  if (android || iphone) {
    location.href = 'http://m.itcast.cn'
  }
})()

history 对象

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

常用属性和方法：

本地存储

本地存储介绍

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

本地存储分类

localStorage

可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在

特性：

• 可以多窗口（页面）
• 共享（同一浏览器可以共享）

语法：

• 存储/修改数据：localSotrage.setItem('key', 'value')
• 获取数据：localStorage.getItem('key')
• 删除数据：localStorage.removeItem('key')
• 清空数据：localStorage.clear()

sessonStorage

特性：

• 生命周期为关闭浏览器窗口
• 在同一个窗口(页面)下数据可以共享
• 以键值对的形式存储使用
• 用法跟 localStorage 基本相同

存储复杂数据类型

本地只能存储字符串,无法存储复杂数据类型.

需要将复杂数据类型转换成JSON字符串,在存储到本地

语法：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const obj = {
  name: 'cengdong',
  age: 18
  gender: '男'
}
// 通过JSON.stringify序列化对象
localStorage.setItem('obj', JSON.stringify(obj))
const str = localStorage.getItem('obj')
// 通过JSON.parse反序列化字符串为对象
console.log(JSON.parse(str))