BOM介绍

window对象:浏览器窗口

js : ECMAScript对象（array，object,Math,Date） DOM(document) BOM

一：特点

1 .window对象 : 是js中的顶级对象, 所有的全局函数和变量都是window对象的成员(方法和属性)
2 . 只要是window对象的成员，使用时一律可以省略window

console.log( window )
console.log( window.document === document )//true

3 . window对象有一个特殊的属性叫做top, 指向window本身 ,不能被覆盖（变量名不能用top）
声明变量要尽量规范.不要用标准CSS属性作为变量名

二：方法

1 .打开窗口 window.open()
2 .关闭窗口 window.close()

document.querySelector('.btn1').onclick = function(){
  /**
  * @description:
  * @param {str} url网址 
  * @param {str} a标签target  默认值: _blank  
  * @param {str} features 特征 ： 新窗口位置和大小
  * @param {bol} replace 是否替换历史记录 一般默认值
  * @return: 
  */
  window.open('http://www.baidu.com','_blank','left=200px,top=200px,width=300px,height=300px')
}
document.querySelector('.btn2').onclick = function(){
    window.close()
}

三：事件

1 . window.onload = function(){}
加载事件： DOM树 + 外部资源
外部资源过大,防止 DOM树和外部资源没加载完
2 . window.onbeforeunload = function(){}
关闭事件：页面关闭之前执行（存储数据）

//1.页面加载完成（入口函数） : DOM树 + 外部资源
window.onload = function(){
    let box = document.querySelector('.box')
    console.log( box.scrollWidth,box.scrollHeight )
}
//2.页面关闭之前 
window.onbeforeunload = function(){
    console.log('页面要关闭')
    //关闭之前一般会存储数据
}

hostname、DNS域名
hash:锚点定位在网址后面加上#id 就会定位到相应id盒子的地方
search:参数

location对象

location对象：浏览器地址栏 url
1.重点掌握： location.href = ‘url’
2.三个方法
location.assign(‘url’) : 跳转页面（可以回退）
location.replace(‘url’) :替换页面（不可以回退）
location.reload() : 刷新(一般用于移动端)

console.log(window.location)
console.log(location.host) //主机名,IP
console.log(location.hostname) //域名
//重点 href属性 ： 用于跳转页面
console.log(location.href) //完整网址
        
//修改location.href可以实现页面跳转
// location.href = 'http://www.baidu.com'

// assign方法作用 和  location.href完全一致
//可以回退
location.assign('http://www.baidu.com')

//替换 ：无法回退
location.replace('http://www.baidu.com')

//刷新： 相当于F5
location.reload()

history对象

history对象：历史记录
history.back() : 返回上一页
history.forward() : 前进下一页
history.go(数字) :
(1)负数：回退 -1 ：回退一个页面 -2：回退两个页面
(2)0 : 刷新
(3)正数：前进 1：前进一个页面 2：前进两个页面

navigator对象

navigator对象：用户信息
用途：收集用户信息

console.log(navigator.userAgent)//用户代理： 用户设备信息+浏览器信息

screen对象

screen : 用户电脑屏幕（了解，不常用）

localStorage

1.localStorage : 本地存储
* 经典场景：免登录
2.语法：
存数据： localStorage.setItem(‘属性名’,属性值)
取数据： localStorage.getItem(‘属性名’)
删数据 : localStorage.removeItem(‘属性名’)
清空数据 : localStorage.clear()
3.注意点：
3.1 永久存储：数据存在硬盘中
3.2 只能存储string类型数据, 如果存储其他类型编译器会自动转换string类型存储

sessionStorage

1.sessionStorage : 临时存储
* 经典场景：页面间传值(一般用于移动端)
2.语法：
存数据： sessionStorage.setItem(‘属性名’,属性值)
取数据： sessionStorage.getItem(‘属性名’)
删数据 : sessionStorage.removeItem(‘属性名’)
清空数据 : sessionStorage.clear()
3.注意点：
3.1 临时存储：数据存在内存中, 页面一旦关闭数据自动清空
3.2 只能存储string类型数据, 如果存储其他类型编译器会自动转换string类型存储

*** localStorage与sessionStorage的区别（异同点）

相同点：作用一致，都是存储数据
不同点：存储方式不同
- localStorage : 硬盘存储
- sessionStorage : 内存存储

JSON

1.JSON是什么: 是一种数据格式，本质字符串
* JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
2.JSON作用 : 解决数据跨平台兼容性
* 在实际开发中,我们前端要经常与服务器(后端)进行数据交互。而前端与后端编程语言不同。
前端： js , 后端： java、c++ 、 php 、 python 、 .net 、 c# 、 go 等等
不同的编程语言数据类型不一致。无法互通的。为了可以让不同的编程语言之间可以进行数据交互，后来人们发明了一种所有编程语言都通用的格式：叫做 JSON 。
3.JSON语法 :
json → js : let jsObj = JSON.parse( json格式 )
js → json : let jsonStr = JSON.stringify( js对象 )
json必须加引号

//json : 是一种数据格式，本质是字符串
let json = '{ "name":"张三","age":"20","hobby":["敲代码","学习"] }'
console.log( json )
//js对象 
let js = {
    name:'ikun',
    age:30,
    hobby:['上课','唱歌']
}
//(1)json -> js :   let jsObj =  JSON.parse(json格式)
let jsObj = JSON.parse( json )
console.log( jsObj )
//(2)js -> json :  let jsonStr = JSON.stringify( js对象 )
let jsonStr = JSON.stringify( js )
console.log(jsonStr)

localStorage如何存储其他类型(对象类型):使用JSON

let btn1 = document.querySelector('.btn1')
let btn2 = document.querySelector('.btn2')
let obj = {
    name: 'ikun',
    age: 30,
    sex: '男'
}
// 存对象:先转后存
btn1.onclick = function () {
    // js对象转json字符串
    // let json = JSON.stringify(obj)
    // 存
    // localStorage.setItem('user', json)
    // 简写
    localStorage.setItem('user', JSON.stringify(obj))
}
// 取对象:先取后转
btn2.onclick = function () {
    //  取
    // let json = localStorage.getItem('user')
    //  json字符串转js对象
    // let js = JSON.parse(json)
    // 简写
    let js = JSON.parse(localStorage.getItem('user'))
    console.log(js)
}