BOM

   BOM :浏览器对象模型(由浏览器赋予我们的能力)

BOM 其实就是 浏览器提供给我们操作浏览器的一个能力

• 获取浏览器的宽高
• 获取浏览器页面卷去的高度
• 通过JS控制页面的跳转
• 获取浏览器地址栏的信息
• 操作浏览器地址栏的信息
• 操作浏览器页面的滚动条
• 获取到浏览器的版本
• 打开浏览器的弹窗

 核心:

  页面中有一个对象叫做 window

  window JS 内置的一个对象,上述所有方法都可以利用 window 内部提供的一些东西解决

  window 内的书写的时候可以   window.xxx  xxx

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

  扩展:

    我们所有的全局变量(函数以外的地方声明变量) 和 全局函数(函数以外的地方声明的函数)

    全部存放在 window 对象中

    window 对象中有一个属性叫做 name

    所以我们在开发时,尽量避免全局变量或者全局函数的名字叫做name

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

浏览器窗口尺寸与弹出框

 BOM

  获取浏览器的窗口尺寸(宽高)

   注意当前方法是包含浏览器的滚动条的

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

 BOM

  打开浏览器提供的弹出框

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

   alert   弹出框

   confim  用户询问框  会有一个返回值,如果点确定返回true,否则返回false

   弹出框会中断(暂停)程序的运行,直到关闭弹出框

    console.log('JS 开始')
    alert('提示信息1:alert')
    consoele.log('JS 运行到一半')
    window.alert('提示信息2: window.alert')
    console.log('JS运行完毕')

    var res = window.confirm('你确定删除吗?')
    console.log('用户确定与否',res)   

浏览器的地址信息

 浏览器的地址信息

   在 window 对象中有一个对象 location,他的内部存储的就是 浏览器地址的信息

浏览器的地址信息

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

location.href

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

location.reload

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

浏览器的历史记录

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

history.forward

   history.back 用来回退历史记录的,就是回到前一个页面,相当于浏览器左上角的 ← 按钮

   注意:我们需要有上一条记录的,不然就一直在这个页面 不会回退

     window.history.history.back()

history.forward

   history.fortard 是渠道下一个历史记录里面, 也就是去到下一个页面,就相当于 浏览器左上角的 → 按钮

   注意:前提是我们之前有过回退操作,不然的话我们现在就是在最后一个页面,没有下一个

   window.hitory.forward()

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

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

     window.navigator

浏览器的事件

   浏览器延迟加载事件

     在以前开发的时候,我们会将 所有的JS代码,全部放在这个函数中运行

     因为在这个函数中运行的时候,可以保证页面所有的资源已经加载完毕了,比如 标签, 图片

    window.onload = function(){
        console.log('当前函数不需要调用,会在当前页面的所有资源加载完毕的时候执行')
    }
    //浏览器的滚动事件
    window.onscroll = function(){
        console.log('当前函数也不需要调用,会在浏览器发生滚动事件的时候执行')
    }

浏览器的滚动距离

   注意: 滚动事件发生的时候,浏览器的位置一直不变,而是 浏览器内的页面发生了滚动

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

如何区分

   谷歌 火狐

      如果 页面 声明 那么需要使用documentElement

      否则使用 body

   IE(了解)

      如果没有 声明 那么使用两个都没问题

      如果 声明 那么只能使用 documentElement

   Safari

      两个都不用,使用一个单独的方法 'window.pageYOffset'

localStorage(本地存储)

  本地存储

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

  localStorage

    浏览器的本地存储,持久化存储, 存储之后不手动删除, 那么永远存在

    在存储的时候,只能存储基础数据类型中的字符串

    如果需要存储其他数据类型,需要借助 JSON 提供的方法

    可以实现跨页面通讯

         // 增 --- 实现一个本地存储 (localStorage)
        // window.localStorage.setItem('存储的标识是什么', '要存储起来的内容')
        window.localStorage.setItem('box', '20230824')
        window.localStorage.setItem('qq', '88888888')

        window.localStorage.setItem('arr1', [1, 2, 3, 4, 5])
        window.localStorage.setItem('obj1', { id: 'QF001', name: '张三' })

        // JSON.stringify([1, 2, 3, 4, 5])      会将传入的数组 转换成 JSON 格式的字符串, 然后存储到本地存储中
        window.localStorage.setItem('arr2', JSON.stringify([1, 2, 3, 4, 5]))
        window.localStorage.setItem('obj2', JSON.stringify({ id: 'QF001', name: '张三' }))


        // 查 --- 获取之前存储到本地的一些数据
        console.log('box: ', window.localStorage.getItem('box'))

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

        // 获取到的数据有问题, 无法使用
        console.log('arr1: ', window.localStorage.getItem('arr1'))
        console.log('obj1: ', window.localStorage.getItem('obj1'))


        // 此时获取到的 JSON 格式的 字符串, 想要使用 ,需要借助 JSON 提供的方法, 还原格式
        console.log('arr2: ', window.localStorage.getItem('arr2'))
        console.log('obj2: ', window.localStorage.getItem('obj2'))

        // JSON.parse()     能够将传入的 JSON 格式的字符串还原成原本的数据类型, 原本是数组就还原为数组, 原本是对象就还原为对象
        console.log('arr2: ', JSON.parse(window.localStorage.getItem('arr2')))
        console.log('obj2: ', JSON.parse(window.localStorage.getItem('obj2')))

localStorage

   增: window.localStorage.srtItem('key', 'value')

   查: window.localStorage.getItem('key')

    返回值: 查询到返回的数据,否则返回null

   删:window.localStorage.removeItem('key')

   清空: window.localStorage.clear()

  推荐只使用删除,目的是为了自已操作不会影响别人的代码

sessionStorage

   也是浏览器本地存储的一种方案,是临时存储,当时浏览器关闭的时候,存储的内容,自动清空

   跨页面通讯  必须是从当前页面跳转过去的页面才能实现通讯

    //增
    
    window.sessionStorage.setItem('wx1','123456')
    window.sessionStorage.setItem('wx2','qwerqwer')
    window.sessionStorage.setItem('wx3','@#$%^')
    window.sessionStorage.setItem('wx4','2310')
    
    
    //查
    
    var wx = window.sessionStorage.getItem('wx')
    console.log(wx)
    
    
    //删除
    
    window.sessionStorage.removeItem('wx')
    
    
    //清空
    
    window.sessionStorage.clear()
    

cookie

1. 只能存储字符串,并且有自己固定的格式    key=value; key2=value2; key3=value3
2. 存储大小有限制 4kb 左右
3. 存储具有时效性  默认是会话级(sessionStorage), 但是我们也可以指定过期时间
4. 操作必须依赖服务器  目前可以借助 liveserver 启动页面 , 不要不要本地的方式启动
5. 前端后端通讯的时候 会自动携带 cookie  前端向后端发起请求的时候,会自动把 cookie 内部的数据 发送给后端
6. 前后端语言都可以操作
7. 存储依赖域名,同一个域名可以通讯,否则不行

    //设置一条 cookie
    document

    //设置一条 cookie
    document.cookie = 'qq=66666666'
    document.cookie = 'wx=88888888'
    //获取 cookie
    console.log(document.cookie)      //qq=6666666666666    wx=88888888

cookie_的过期时间

    //设置一条 cookie
    document.cookie = 'a=100'
    
    //设置一条具有过期时间的 cookie
    var time = new Date()
    
    //因为我们当前时间是按照东八区的时间执行的,
    //比世界标准时间快 8 小时,所以设置过期时间的时候需要将是将往回调8小时
    
    times.setTime(time.getTime() - 8 * 60 * 60 * 1000 + 1000 * 3)
    document.cookie = 'b=222;expires=' + time
    
    setTimeout(function ( ){
        console.log(document.cookie)
    },5000)

本地存储之间的区别

  1.出现时间     cookie 有 JS 的时候就有了     storage 有 H5 的时候才有的

  2.存储大小     cookie 4kb左右     storage 4mb-20mb

  3.前后端交互     cookie 交互时会自动传递给后端     stirage 交互时不会自动传递给后端,除非手动携带

  4.前后端操作     cookie 前后端语言都可以操作     stirage 只能前端语言操作

  5.过期时间     cookie 可以手动指定过期时间,也有默认的过期时间     storage 没有过期时间

两个 storage 之间的区别

  localStorage     过期时间:持久化存储,除非手动删除     跨页面通讯:能过完成

  sessionStorage     过期时间:临时存储,关闭浏览器的时候数据就会被清空     跨页面通讯: 只有从当前页面跳转过去的页面才能完成

两个 storage 的共同点

  都必须存储字符串   存储其他数据类型的时候,需要借助 JSON 的方法进行一个转换