第十四章 BOM 和 本地存储

一、初始BOM

1、BOM(Browser Object Model)：浏览器对象模型，其实就是操作浏览器的一些能力；

2、可以操作的内容

• 获取一些浏览器的相关信息（窗口的大小） ；
• 操作浏览器进行页面跳转 ，刷新、返回；
• 获取当前浏览器地址栏的信息
• 浏览器的滚动条
• 让浏览器出现一个弹出框（alert / confirm / prompt） ；

3、BOM的核心就是window对象（是一个内置对象，里面包含着操作浏览器的方法 ）；

二、获取浏览器可视窗口尺寸

innerHeight 和 innerWidth ：分别获取浏览器的可视窗口的宽和高；

注意：可视窗口尺寸是包含滚动条的尺寸，滚动条是浏览器的一部分；

        var windowHeight = window.innerHeight
        console.log(windowHeight); //780

        var windowWidth = window.innerWidth
        console.log(windowWidth); //680

三、浏览器的弹出层

1、alert()==在浏览器弹出一个提示框;

• 这个弹出层只有一个提示框，点击确认之后，提示框就会取消；
• 返回值是undefined；                

2、confirm()==在浏览器弹出一个询问框；

• 当我们点击确定的时候会得到==true；
• 当我们点击取消的时候会得到==false；       

3、prompt()==在浏览器弹出一个输入框；

• 点击取消的时候得到==null；
• 点击确定得到的就是输入的内容 ；
• 若没有输入内容点击确定，会返回空字符串；     

四、浏览器的地址信息

1、location：是一个对象，专门用来存储浏览器的地址栏内的信息的；

2、location.href:存储的浏览器地址栏内 url 地址的信息；

• 会把中文变成 url 编码的格式；
• 是一个读写属性；
• location.href可以给它进行赋值，会跳转到你给的那个地址上；       

//读（获取）
//返回值就是地址栏中详细信息，以url编码形式返回
console.log(window.location.href)

//跳转
window.location.href = './index.html'

 3、location.reload：刷新，重新加载一下页面

//这个一般会放到里面，直接放在外面会形成死循环
window.location.reload()

        注意：不要写在全局，不然浏览器会一直刷新

五、浏览器的历史记录

1、history：也是一个对象，专门用来存储历史记录信息的；

2、history.back（）：历史后退，用来退历史记录的，回到上一个按钮，相当于 ⬅️按钮；

        注意：前提是你要有上一条记录，不然就是一直在这一个页面；

window.history.back()

3、history.forword（）：历史前进，去到下一个历史记录，去到下一个页面，相当于浏览器上的 ➡️ 按钮；

        注意：前提是你要之前有过回退操作，不然现在所在页面就是最后一个页面；

window.history.forward()

4、history.go（参数）:历史跳转 

参数：正数===历史前进；  负数===历史后退  ；0==停留在当前页面

//往后退一个页面
window.history.go(-1)

//往后退两个页面
window.history.go(-2)

//停留在当前页面
window.historu.go(0)

六、浏览器的版本信息（了解）

1、navigator：是一个对象，专门用来获取浏览器信息的；

2、navigator.userAgent：获取浏览器的整体信息

console.log(window.navigator.userAgent)
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36

3、navigator.appName：获取浏览器的名称

console.log(window.navigator.appName);
// Netscape

4、navigator.appVersion：获取浏览器版本号

console.log(window.navigator.appVersion);
// 5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36

5、navigator.platform ：获取到当前计算机的操作系统

七、浏览器的常用事件

1、onload：是一个事件，在页面所有资源加载完毕后执行的

//语法：window.onload = function(){要执行的代码}
//执行时机：当页面上所有资源加载完毕之后执行
//所有资源：html、css、js、img、视频、音频...
//script（内嵌）可以书写在任何位置，建议是书写在body末尾
window.onload = function () {
  console.log('页面已经加载完毕')
}

2、onscroll：是一个事件，是当滚动条滚动的时候触发，或者是鼠标滚动的时候触发

//不管是横向的滚动还是纵向的
window.onscroll = function () {
  console.log('浏览器滚动了')
}

注意：前提是页面的高度要超过浏览器的可视窗口才可以

3、onsize ：是一个时间 ，是当页面窗口的大小改变之后触发，包括宽高；

window.onresize = function () {
  console.log('页面窗口大小变化了')
}

八、浏览器滚动的距离

1、浏览器滚动了吗？

• 浏览器是没有滚动的，是一直在那里；
• 滚动的是我们的页面，浏览器没有动，只不过页面向上走了；
• 所以这个不能单纯的算是浏览器的内容了，而是我们页面的内容；
• 所以这时不在用window对象了，而是使用document对象；

2、scrollTop：获取的是页面向上滚动的距离

（1）两种获取方式

• document.body.scrollTop
• document.documentElement.scrollTop        

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


        //因为存在兼容性的问题，所以我们写的时候可以用 ||
         window.onscroll = function(){
            console.log(document.body.scrollTop || document.documentElement.scrollTop); //0
        }

区别：（1）两者都是可以获取页面向上滚动的距离；

        （2）IE浏览器

• 没有 DOCTYPE 声明的时候，两者都能用 ;
• 有 DOCTYPE 声明的时候，只能用==document.documentElement.scrollTop ;                       

        （3）chrome(谷歌浏览器)和(FireFox)火狐浏览器

• 没有 DOCTYPE 声明的时候，用 ==document.body.scrollTop ;
• 有 DOCTYPE 声明的时候，用 ==document.documentElement.scrollTop

        （4）Safari

• 两个都不用，使用一个单独的方法 window.pageYOffset

3、scollLeft：获取页面向左滚动的距离

两种获取方式：

• document.body.scrollLeft
• document.documentElementLeft

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

//兼容性解决办法
window.onscroll = function () {
  console.log(document.body.scrollLeft || document.documentElement.scrollLeft)
}

区别：和之前的 scrollTop 一样

4、scrollTo :去到一个指定位置

（1）有两种使用方式

• 传递数字
• 传递对象        

//第一种 传递数字
//语法：window.scrollTo(x,y) 
//注意：传递的时候必须要传递两个参数，x,y同时传递，传递一个会报错；
//会瞬间定位到指定的位置，没有过渡效果；

btn.onclick = function(){
    window.scrollTo(200,300)
}


//第二种 传递对象
//语法：window.scollTo({left:xxx,top:yyy})
//left：表示横向距离
//top:表示纵向距离
//可以只传递一个值，没有过渡效果，瞬间定位
//可以添加一个属性==behavior:'smooth'  会缓缓滑动

btn.onclick = function(){
    window.scrollTo({
        //单个也可以执行
        left:200
        //缓缓滑动
        behavior:'smooth'
    })
}

九、浏览器的标签页

1、浏览器的标签页：就是我们的代码来操作标签页；

2、有两个方向

• 第一个：开启一个新的标签页；

        （1）语法: window.open('地址')；

        （2）作用: 就是开启一个新的标签页

• 第二个：关闭当前标签页；

        （1）注意: 只能关闭当前的标签页；

        （2）语法: window.close()；

        （3）作用: 就是关闭当前的标签页

        // 第一个: 就是开启一个新的标签页
         btn.onclick = function () {
             window.open('https://www.baidu.com')
         }

        // 第二个: 就是关闭当前标签页
         btn.onclick = function () {
             window.close()
         }

十、本地存储

1、含义：就是浏览器允许我们存储一下数据在浏览器中==storage;

2、分为两种 localStorage 和 sessionStorage；

3、localStorage 长期存储

（1）特点

• 除非手动删除 , 否则会一直存在于我们的浏览器中；
• 清除缓存, 或者是卸载了浏览器就没有了；
• 就是可以跨页面使用

（2）操作

• 保存(存储)==语法: window.localStorage.setItem('名称','值')，只能保存字符串；
• 获取(那出来)  == 语法: window.localStorage.getItem('名称')，保存的时候保存的是字符串 , 获取出来的也是字符串；
• 删除 == 语法: window.localStorage.removeItem('名称')

        // localstorage 存储
        window.localstorage.setItem('a',100)
        window.localstorage.setItem('b',200)

        //若存储的是一个对象，我们需要转成字符串
        var obj = {
            name:'Rose'
        }

        var res = JSON.stringify(obj)
        console.log(res);
        console.log(typeof res); 


        //获取
        var res = window.localStorage.getItem('a')
        var res = window.localStorage.getItem('c')
        console.log(res);
        console.log(JSON.parse(res))
        console.log(typeof res);

        // 删除
        window.localStorage.removeItem('b')    

 查看位置：右击检查

 4、sessionStorage  会话级别的存储

（1）特点

•   浏览器关闭以后就没有了；
•   也可以跨页面使用 , 但是有要求；
•    必须是本页面跳转过去的；

（2）操作

• 保存(存储) == 语法: window.sessionStorage.setItem('名称','值')，只能保存字符串；
• 获取(那出来) == 语法: window.sessionStorage.getItem('名称') ，保存的时候保存的是字符串 , 获取出来的也是字符串；
• 删除 == 语法: window.sessionStorage.removeItem('名称')

        // sessionStorage
        // 储存
        window.sessionStorage.setItem('color','red')

        // 获取
         var res = window.sessionStorage.getItem('color')
         console.log(res);

        // 删除
        window.sessionStorage.removeItem('color')

 查看位置：右击检查

 5、cookie  是本地存储的一种

• 特点：（1）只能存储字符串。但是有固定的格式：key = value;key1 = value1;

          (2)存储的大小。cookie只能存储4kB左右，只能记录存储一些基本信息，比如密码，账号；

        （3）时效性。默认是会话存储，但是可以手动设置过期时间；

        （4）前后端操作。前端只能使用我们js操作cookie，所有的后端语言都可以操作cookie；

        （5）打开方式。只能在服务端打开，本地文件打开是不能进行操作的；

        （6）携带。只要cookie中有数据或者是内容，在这个页面发生前后端交互的时候，就会自动携带；

        （7）同一域名下生效。在那个域名下操作的，就只能在这个域名下操作；

•  如何在服务端打开

        =>cookie 必须借助于一个服务器，vscode的插件，找到Live Server,下载安装就可以，之后打开方式用如下的，不是用alt+B

         =>存储一条数据  语法：docunmen.cookie = '名称=值'

docunmen.cookie = 'a=100'

=>存储一条带有过期时间的数据 语法：docunment.cookie  = '名称 = 值；expires=时间对象'

注意：时期的过期问题：在服务端：不管是那个区的时间，都会按照时间标准时间 ；

如果想要设置一个30秒以后过期的时间，首先要回到世界标准时间，之后加上30秒；

获取： 语法：docunment.cookie

var time = new Date() 

docunmen.cookie = 'b=200；expires = '+time  //没有之后操作，这里会在8小时之后过期



//设置30s过期

var time = new Date() 
time.setTime(time.getTime() -1000 * 60 * 60 * 8 + 30)
docunmen.cookie = 'b=200；expires = '+time

 

 

十一、弹窗广告

        // 可以把定时器封装呈一个函数
        function show(num) {
            var num = Math.floor(Math.random() * 5 + 5)*1000
            setTimeout(function () {
                ad.style.display = 'block'
            },num)
        }
        // 页面打开执行一次
        show()
        //关闭之后执行一次
        btn.onclick = function () {
            // 让盒子消失
            ad.style.display = 'none'
            // 让盒子重新出现
            show()
        }