BOM 的概念和常用 API

BOM(Browser Object Model): 浏览器对象模型
- 其实就是操作浏览器的一些能力
我们可以操作哪些内容?
- 获取浏览器的宽高
- 获取浏览器卷去的高度
- 操作浏览器进行页面的跳转
- 获取当前浏览器地址栏的信息
- 操作浏览器的滚动条
- 浏览器的信息(浏览器的版本)
- 让浏览器出现一个弹出框(alert/prompt/confirm)
BOM 的核心就是 window 对象
- window 是浏览器内置的一个对象, 里面包含着操作浏览器的方法
- window内的书写的时候可以 window.xxx也可以直接xxx

    console.log(window)
    prompt('弹出框1')
    window.prompt('弹出框2')

扩展：我们所有的全局变量（函数以外的地方声明的变量）和全局函数（函数以外的地方声明的函数），全都存放在window对象中
- window对象中有一个属性叫 name，我们在开发的时候，尽量避免全局变量或全局函数的名字是name

    var abc = 100
    function abcfn1 () {}
    var abcfn2 = function () {}
    
    console.log(window)

一、获取浏览器窗口的尺寸

innerHeight 和 innerWidth
- 作用: 获取浏览器窗口的高度和宽度(包含浏览器滚动条)
- 语法: window.innerHeight; window.innerWidth

    console.log('浏览器当前宽度',window.innerWidth)
    console.log('浏览器当前高度',window.innerHeight)

二、浏览器的弹出层

confirm--用户询问框
- 有一个询问信息和两个按钮
  - 点击确定返回 true
  - 点击取消返回 false

    var res = confirm('您确定删除吗？')
    console.log(res)  //true || false

alert--弹出框
- 弹出框会中断（暂停）程序的运行，直到关闭弹出框

    console.log('JS开始')
    alert('弹出框')
    console.log('JS运行到一半')
    alert('又弹')
    console.log('JS运行完毕')

prompt--用户输入框
会有一个返回值，就是用户输入的内容，永远是字符串格式

    prompt('请输入xxx:')

三、浏览器的地址信息

在 window 中有一个对象叫做 location, 它是专门用来存储浏览器地址栏内的信息

1、location.href

location.href 专门存储浏览器地址栏内 url 地址的信息
语法: var url = window.location.href
我们也可以给这个属性赋值, 这样就会跳转到我们复制的地址了

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

2、location.reload

location.reload 会重新加载页面, 相当于刷新
注意: 不要写在全局内, 否则浏览器会一直刷新

window.location.reload()

四、浏览器的历史记录

window 中有一个对象叫做 history 他专门用来存储历史记录信息

1、history.back

history.back 用来回退历史纪录的, 就是回到前一个页面, 相当于浏览器左上角的 ← 按钮
注意: 我们需要有上一条记录, 不然就一直在这个页面不会回退

window.history.back()

2、history.forward

history.forward 是去到下一个历史记录里面, 也就是去到下一个页面, 就相当于浏览器左上角的 → 按钮
注意: 前提是我们之前有过回退操作, 不然的话我们现在就是在最后一个页面, 没有下一个

window.history.forward()

五、浏览器的版本信息(了解)

window 中的 navigator 可以获取到浏览器的信息

六、浏览器的 onload-延迟加载事件

该事件会在页面所有资源加载完毕后执行
以前开发会把所有JS代码都放到这个事件里面，因为可以保证页面所有的资源已经加载完毕了。

window.onload = function () {
    console.log('页面已经加载完毕')
}

在浏览器中, 把 JS 写在 head 中, JS 在加载时 DOM 还没加载完, 可能会导致获取 DOM 时出现问题, 但是如果把代码放在 onload 事件中, 则不会出现问题
如果把 JS 写在 body 底部, 则写不写 onload 都一样

七、浏览器的 onscroll-滚动事件

当浏览器的滚动条滚动时会触发该事件, 或者鼠标滚轮滚动时触发

window.onscroll = function () {
    console.log('浏览器滚动了')
}

八、浏览器的滚动距离

浏览器的内容可以滚动, 那么我们就可以获取到浏览器滚动的距离
但是需要思考一个问题
- 浏览器真的滚动了吗?
- 其实浏览器没有滚动, 一直在那里, 滚动的是浏览器的页面
- 所以说: 其实浏览器没动, 只不过页面向上走了
所以这个已经不能单纯的算是浏览器的内容了, 而是我们页面的内容
所以不再是使用 window 对象了, 而是使用 document 对象

1、scrollTop

获取的事页面向上滚动的距离
- 两种方式
  - document.body.scrollTop
  - document.documentElement.scrollTop

    window.onscroll = function () {
    console.log(document.body.scrollTop)
    console.log(document.documentElement.scrollTop)
}

区别
- IE 浏览器(了解)
  - 没有 DOCTYPE 声明的时候, 用这两个都行
  - 有 DOCTYPE 声明的时候, 只能用 document.documentElement.scrollTop
- Chorme 和 FireFox
  - 没有 DOCTYPE 声明的时候, 用 document.body.scrollTop
  - 有 DOCTYPE 声明的时候, 用 document.documentElement.scrollTop
- Safari
  - 两个都不用, 使用一个单独的方法 window.pageYOffset

2、scrollLeft

获取页面向左滚动的距离
- document.body.scrollLeft
- document.documentElement.scrollLeft

window.onscroll = function () {
    console.log(document.body.scrollLeft)
    console.log(document.documentElement.scrollLeft)
}

区别
- 参考 scrollTop

九、浏览器的本地存储

把一些常用的信息存储在用户的电脑本地（存储在浏览器中）

1、localStorage

浏览器本地存储, 持久化存储, 一旦存储永久存在，除非手动删除
只能存基础数据类型中的字符串, 不能存储复杂数据类型
如果需要存储其他数据类型，需要借助JSON提供的方法

可以实现跨页面通讯

// 增---实现一个本地存储(localStorage)
//window.localStorage.setItem('key','value')
//window.localStorage.setItem('存储的标识（变量名）','要存储起来的内容')
window.localStorage.setItem('box','2023-08-24')

 //JSON.stringify([1,2,3,4,5]) 会将传入的数组转换成JSON格式的字符串 ，然后存储到本地存储中window.localStorage.setItem('arr',JSON.stringify[1,2,3,4,5])
 window.localStorage.setItem('obj',JSON.stringify{id:'123',name:'张三'})
// 删
window.localStorage.removeItem(key)
// 清空
window.localStorage.clear()


/**
 * 查
 *      有      --->    返回对应的 value
 *      没有    --->    返回 Null
*/
window.localStorage.getItem(key)


    var qq = window.localStorage.getItem('qq')
    console.log('qq: ', qq)

    console.log('arr1: ', window.localStorage.getItem('arr1'))//1,2,3,4,5
    console.log('obj1: ', window.localStorage.getItem('obj1'))//[object Object]
    
    
    // 此时获取到的 JSON 格式的 字符串, 想要使用 ,需要借助 JSON 提供的方法, 还原格式
    console.log('arr2: ', window.localStorage.getItem('arr2'))//[1,2,3,4,5]
    console.log('obj2: ', window.localStorage.getItem('obj2'))//{"id":"QF001","name":"张三"}
    
    
    console.log('arr2: ', JSON.parse(window.localStorage.getItem('arr2')))//[1,2,3,4,5]
    console.log('obj2: ', JSON.parse(window.localStorage.getItem('obj2')))//{"id":"QF001","name":"张三"}

JSON.stringify()将数组、对象转换为JSON格式的字符串;
JSON.parse()将字符串转化为对象或数组

2、sessionStorage

浏览器的本地存储, 临时存储, 关闭浏览器以后, 存储内容自动消失
想要跨页面通讯, 必须是从本页面跳转的才可以

// 增
window.sessionStorage.setItem(key, value)
// 删
window.sessionStorage.removeItem(key)
// 清除
window.sessionStorage.clear()
/**
 * 查
 *      有      --->    返回对应的 value
 *      没有    --->    返回 Null
*/
window.sessionStorage.getItem(key)

    sessionStorage.setItem('name', 'zzx')
    sessionStorage.setItem('age', 20)
    sessionStorage.setItem('arr', JSON.stringify([5, 4, 3, 2, 1]))
    sessionStorage.setItem('obj', JSON.stringify({ 'like': 'wb', 'hate': 'sheep' }))
    console.log('name:', sessionStorage.getItem('name'))
    console.log('age:', sessionStorage.getItem('age'))
    console.log('arr:', JSON.parse(sessionStorage.getItem('arr')));
    console.log('obj', JSON.parse(sessionStorage.getItem('obj')));
    var res = sessionStorage.getItem('name')
    console.log(res)//zzx
    var res2 = sessionStorage.getItem('name2')
    console.log(res2)//null
    sessionStorage.removeItem('age')
    sessionStorage.clear()

3、cookie

Cookie 有一个过期机制. 当 Set-Cookie 时可以指定一个有效期.当浏览器发现 Cookie 过期后, 它就会删除掉；服务端也是通过这种方式来实现删除 Cookie 的哦；如果没有指定有效期, 浏览器会在关闭的时候直接删除掉 Cookie, 所以想 Cookie 持久就必须设定expires 或 max-age.
1. 只能存储字符串, 有固定格式
  - key=value; key2=value2; key3=value3
1. 存储大小有限制
  - 4KB左右
1. 存储有时效性
  - 默认是会话级别时效, 但是可以手动设置过期时间
1. 操作必须依赖服务器
  - 本地打开页面时不能操作 cookie
  - 目前可以借助live server方式启动
1. 前后端通讯的时候，会自动携带cookie
  - 前端向后端发起请求的时候，会自动把cookie内部存储的数据发给后端
  - 只要 cookie 空间中有内容的时候
  - 会在该页面和后端交互的过程中自动携带
1. 前后端操作
  - 前端可以使用 JS 来操作
  - 任意一个后端语言都可以操作
1. 存储依赖域名
  - 哪一个域名存储, 哪一个域名使用
  - 不能跨域名通讯

        // 设置 cookie用document
        document.cookie = 'a=100'
        document.cookie = 'b=2000'

        //获取 cookie
        console.log(document.cookie)       // a=100; b=2000

        document.cookie = 'a=100'

        //设置一条具有过期时间的 cookie

        //因为我们的时间是按照东八区的时间执行的，比世界标准时间快8小时，所以设置过期时间的时候需要往回调8小时
        var time = new Date()
        //+号后边是设置多长时间过期
        time.setTime(time.getTime() - 8 * 60 * 60 * 1000 + 1000 * 3)

        document.cookie = 'b=2000;expires=' + time

        setTimeout(function () {
            console.log(document.cookie)
        }, 5000)//a=100

十、本地存储的区别 (面试必问)

出现时间
- cookie: 有 JS 就有了
- storage: H5 出现后才有
存储大小
- cookie: 4k 左右
- storage: 4MB--20MB 左右
前后端交互
- cookie: 交互时会自动传递给后端
- storage: 交互时不会自动传递给后端，除非手动携带
前后端操作
- cookie: 前后端语言都可以操作
- storage: 只能前端 JS 操作
过期时间
- cookie: 默认是会话, 可以手动设置过期时间，也有默认的过期时间
- storage: 没有过期时间

localStorage 和 sessionStorage 的区别
- 过期时间
  - localStorage: 永久存储, 除非手动清除
  - sessionStorage: 临时存储，关闭浏览器数据就会被清空
- 跨页面通讯
  - localStorage: 直接跨页面通讯
  - sessionStorage: 只能是当前窗口跳转的页面才可以通讯
- 共同点
  - 只能存储字符串, 不能存储复杂数据类型
  - 存储其他数据类型的时候,需要借助JSON的方法进行一个转换

初识js--BOM（八）

BOM 的概念和常用 API

一、获取浏览器窗口的尺寸

二、浏览器的弹出层

三、浏览器的地址信息

1、location.href

2、location.reload

四、浏览器的历史记录

1、history.back

2、history.forward

五、浏览器的版本信息(了解)

六、浏览器的 onload-延迟加载事件

七、浏览器的 onscroll-滚动事件

八、浏览器的滚动距离

1、scrollTop

2、scrollLeft

九、浏览器的本地存储

1、localStorage

2、sessionStorage

3、cookie

十、本地存储的区别 (面试必问)