JS-BOM 属性、方法以及事件案例

原创于 2022-06-21 20:34:06 发布 · 359 阅读

CC 4.0 BY-SA版权

文章标签：

本文深入介绍了浏览器对象模型(BOM)中的关键属性，如screen、location、history和navigator，以及window对象的常用方法，如alert、prompt和定时器。此外，还详细阐述了如何使用localStorage和sessionStorage进行持久化数据存储，并给出了cookie的设置示例。通过这些内容，读者将能更好地理解和应用BOM进行网页交互和数据管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

`提示：以下是本篇文章正文内容，下面案例可供参考`

一、什么是BOM属性？

1、screen 屏幕的宽度 while height

availwidth(可用宽度) aviHeight(不包括任务栏)

2、location 在窗口中显示的文档的URL

Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL，其他属性则分别描述了 URL 的各个部分。

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

属性

方法

3、history

Window对象的history属性引用的是该窗口的history对象，包含用户（在浏览器窗口中）访问过的 URL。

属性

方法

4、navigator

存储与浏览器相关的基本信息

BOM 在 navigator 对象中定义了 userAgent 属性，利用该属性可以捕获客户端 user-agent 字符串信息。

var s = navigator.userAgent;
console.log(s);
//返回类似信息：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.0.0 Safari/537.36

二、window对象的常用方法

1、confirm (提示信息) 显示一个带提示信息，确定和取消的对话框

2、alert （提示信息）显示一个带有提示信息和确认按钮的对话框

3、prompt （提示信息）显示一个带提示信息和默认值输入对话框，输入的值作为返回值返回

4、open （‘url’ ‘name’ ‘窗口特征’）打开新的非模态窗口，用指定的特性显示指定url

5、close（）关闭当前窗口

6、setTimeout ( '函数' ， ‘时间’) 设置定时器，在指定的时间后调用一次指定函数

7、clearTimeout （）清除该函数

8、setInterval （ ‘函数’ ，‘时间’）在指定的时间间隔内，重复调用函数

9、clearInterval （）清除该函数

10、onload() 浏览器资源加载完毕自动调用

11、onresize() 页面大小改变，自动触发

12、onscroll() 滚动条自动触发

代码如下（示例）：

window.onload=function(){
	console.log("加载完毕");
	}
			
window.onresize=function(){
	console.log("改变页面大小");
	}
			
window.onscroll=function(){
	console.log("滚动条改变",window.scrollY)
	}

三.持久化存储数据（数据保存）

1、localStorage 永久存储浏览器不卸载数据都在

2、sessionStorage 会话存储浏览器不关闭数据都在

属性

setItem(key,value):设置
getItem(key):获取
removeItem(key):删除
clear():清空

localStorage与sessionStorage属性一致

代码如下（示例）：

<button onclick="sessionStorage.setItem('name','msh')">添加</button>
<button onclick="alert(sessionStorage.getItem('name'))">获取</button>
<button onclick="sessionStorage.removeItem('name')">删除</button>
<button onclick="sessionStorage.clear()">清空</button>

三.cookie键值对以及有效期的设置

储存在用户本地终端上的数据

Cookie是一些网站为了识别用户和跟踪会话而存储在用户本地终端中的文本数据（通常是加密的）

下面是一个获取时间使用cookie存储的案例

var now =new Date();
now.setDate(now.getDate()+1);
document.cookie="name=kk;expires="+now.toGMTString();

效果如下：

总结

提示：这里对文章进行总结：

例如：以上就是今天要讲的内容，本文仅仅简单介绍了BOM 属性、方法以及事件案例，快去练习吧，博主给大家总结了关于Bom的一些知识，不要躺平，快跟博主一起沉迷代码，日渐消瘦吧，哈哈哈