JavaScript 之 BOM 操作

一、BOM 操作的定义

BOM 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM操作是指与浏览器窗口进行互动的操作。

二、window 对象

window 是全局对象，可以提供一些全局的属性和方法，包括操作浏览器窗口的属性和方法。
alert(): 显示一个警告框。
confirm(): 显示一个确认框，返回用户选择的布尔值。
prompt(): 显示一个输入框，并返回用户输入的值。

outerHeight 和 outerWidth用于获取浏览器窗口的整体高度和宽度（包括窗口的装饰，如工具栏、滚动条等）。

window.open()：可以用来打开一个新的浏览器窗口或标签页。
window.close()：可以关闭当前窗口（通常只能关闭由window.open打开的窗口）。
setTimeout(): 在指定时间后执行一次函数。
setInterval(): 每隔一段时间重复执行函数。

三、location 对象

location 对象是 JavaScript 中 window 对象的一个属性，它提供了对当前文档（网页）URL的访问和操作。通过 location 对象，开发者可以获取当前页面的 URL 信息、重定向到新页面、或者重新加载当前页面。

location.href 获取浏览器地址栏信息

location.href = ‘路径名’ 跳转到路径的网页

location.hostname 获取本地的ip

location.host 获取本地的运行环境地址

四、history 对象

history 对象是浏览器的一个内建对象，用于处理浏览器的历史记录。它允许开发者在不重新加载页面的情况下，管理用户的导航历史。

五、navigator 对象

navigator 对象包含了浏览器相关的信息，并提供了一些与设备交互的方法。

六、screen 对象

screen 对象是浏览器中的一个内建对象，用于获取用户设备屏幕的信息。它提供了关于屏幕尺寸、可用空间、颜色深度等的属性，常用于处理与设备显示相关的任务，如调整布局、定位窗口、处理全屏模式等。

screen.width: 返回屏幕的宽度，以像素为单位。
screen.height: 返回屏幕的高度，以像素为单位。
screen.availWidth: 返回屏幕的可用宽度（去除了任务栏等界面元素占用的空间）。
screen.availHeight: 返回屏幕的可用高度（去除了任务栏等界面元素占用的空间）。

七、cookie 对象

cookie 是一种用于在客户端（浏览器）存储少量数据的机制，常用于会话管理、用户偏好设置、跟踪等目的。

通过以下代码提取数据，并将数据缓存到浏览器

// 在事件作用域外 获取浏览器缓存
        var str = document.cookie;
        // console.log(str);// 'id=10010; num=11'
        // 对字符串进行切割
        if(str.length !=0) {
            // 判断缓存的数据有多少个
            if(str.indexOf("; ") > -1) {
                // 多个
                // 以“; ”分号空格符号为切割点
                var arr = str.split("; ");
                // console.log(arr);// ['id=10010', 'num=11']
                // 定义对象
                var obj = {};
                // 循环数组
                for(var i = 0 ; i < arr.length ; i ++){
                    // 获取key
                    // [['id','10010'], ['num','11']]
                    var key = arr[i].split("=")[0];
                    // 获取value
                    var value = arr[i].split("=")[1];
                    // 记录数据
                    obj[key] = value;
                }
                // 把有规则的字符串转成对象
                // console.log(obj);
                // 设置span标签的文本
                document.querySelector("span").innerText = obj.num;
                // 给全局变量num赋值
                num = obj.num - 0;
            }
            else {
                // 单个缓存
                // 以 “=” 为切割点
                var v = str.split("=")[1];
                // 设置span标签的文本
                document.querySelector("span").innerText = v;
                // 给全局变量num赋值
                num = v - 0;
            }
        }

最后查看缓存，缓存成功了