APIS（BOM）——Window对象、本地存储

BOM

BOM浏览器对象模型

Window对象

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

定时器-延时函数

只执行一次，把一段代码延迟执行。

setTimeout(回调函数,等待的毫秒数)   //返回一个id数字型

清除延时函数：

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

js执行机制

js的特点：单线程，也就是说，同一个时间只能做一件事
为了解决这个问题，利用多核cpu的计算能力，js出现了同步和异步。
同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步：在做一件事情的同事，还可以去处理其他事情。
本质区别：这条流水线上各个流程的执行顺序不同

同步任务

在主线程上执行，形成一个执行栈。

异步任务

通过回调函数实现的。异步任务相关添加到任务队列中。
异步任务有三种类型：
1、普通事件，如click、resize
2、资源加载，如load、error等
3、定时器，包括setInerval、setTimeout等

执行机制

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


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

location对象

拆分并保存了URL地址的各个组成部分。
常用的属性和方法：

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

location.href = 'https://www.baidu.com'

• search属性
  获取地址中携带的参数符号 ？ 后面的部分

location.search 

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

location.hash 

• reload方法
  用来刷新当前页面，传入参数true时表示强制刷新

location.reload()
location.reload(true)   //强制刷新

navigator 对象

记录浏览器的相关信息。

• userAgent属性
  检测浏览器的版本及平台

histroy 对象

管理历史记录，浏览器的后退、前进、历史记录等

本地存储

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

本地存储分类

localStorage

本地存储只能存储字符串类型，存入的时候是数字型，拿出来后也会是字符串！
作用：可以将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在。
语法：

• 存储数据

localStorage.setItem('key','value')

• 获取数据

localStorage.getItem('key')

• 删除

localStorage.removeItem('key')

• 更改数据

localStorage.setItem('key','value')  //前提是key已经存在

• 清空数据

localStorage.clear() 

sessionStorage

关闭浏览器就会消失，用法和localstorage一致

存储复杂数据类型

本地存储只能存储字符串，无法直接存储复杂数据类型
将复杂数据类型转换成JSON字符串然后再存储到本地。
语法：

JSON.stringify(复杂数据类型)        //如对象、数组

取到的JSON字符串，属性和值都是被 双引号 包含
最后将JSON字符串转换为复杂数据类型
语法：

JSON.parse(JSON字符串)        //转换成：对象、数组

拼接字符串的新思路

• 数组的map方法
  map可以遍历数组处理数据，并且返回新的数组。主要用于 需要返回一个新数组，不要用来遍历数组。

  const arr = ['red', 'green', 'pink']
const newArr = arr.map(function (ele, index) {
    console.log(ele);    //ele得到数组中每个元素
    console.log(index)  //得到数组中每个元素的索引号
    return ele + '颜色'   //遍历数组，为每个元素添加字符颜色 返回了一个新数组
})
console.log(newArr)     //newArr = ['red颜色, 'green颜色', 'pink颜色']

• 数组的join方法
  用于把数组中的所有元素转换成一个字符串。

// join方法：将数组中所有元素返回一个字符串
console.log(newArr.join())          //若join()小括号里什么也不写，则用逗号拼接：red颜色,green颜色,pink颜色
console.log(newArr.join(''))        //若join()小括号里写空字符，则没有间隔符号：red颜色green颜色pink颜色