BOM 浏览器对象模型

发布于

原文链接：https://note.noxussj.top/?source=cloudtencent

window 对象

提示框 alert

代码语言：javascript
复制
alert(1)

确认提示框 confirm

代码语言：javascript
复制
var conf = confirm('是否打开') // true or false

定时器 setTimeout

代码语言：javascript
复制
var t1 = setTimeout(function () {
    console.log(1) // 3000 毫秒后打印 1
}, 3000)

取消定时器 clearTimeout

javascript

代码语言：javascript
复制
clearTimeout(t1)

循环定时器 setInterval

代码语言：javascript
复制
var t1 = setInterval(function () {
    console.log(1) // 每隔 1000 毫秒打印 1
}, 1000)

取消循环定时器 clearInterval

代码语言：javascript
复制
clearInterval(t1)

本地化存储 localStorage

localStorage 是 HTML5 新增的 API，主要用于长期存储数据在本地（存储在访问者的浏览器中），它是没有过期时间的，除非你的手动删除它，否则它会一直存在。localStorage 的存储数据大小是 4M。

代码语言：javascript
复制
// 设置缓存
localStorage.setItem('name', 'xiaoming')

// 读取缓存

localStorage.getItem('name') // 'xiaoming'


// 删除缓存

localStorage.removeItem('name')

1. 设置缓存2. 读取缓存3. 删除缓存

读取缓存结果：空

设置和删除缓存后可以通过 "浏览器调试工具" 进行验证。

location 对象#

获取 url 地址 location.href

代码语言：javascript
复制
var str = location.href // 'https://echarts.noxussj.top/#/'

获取域名 location.host

代码语言：javascript
复制
var str = location.host // 'echarts.noxussj.top'

获取端口号 location.port

代码语言：javascript
复制
var str = location.port // 8888

获取 web 协议 location.protocol

代码语言：javascript
复制
var str = location.protocol // 'https:'

navigator 对象#

获取浏览器名称 navigator.appName

代码语言：javascript
复制
var str = navigator.appName // 'Netscape'

获取浏览器版本 navigator.appVersion

代码语言：javascript
复制
var str = navigator.appVersion // '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36'

获取操作系统 navigator.platform

代码语言：javascript
复制
var str = navigator.platform // 'Win32'

history 对象#

返回上一页 history.back

代码语言：javascript
复制
history.back()

返回下一页 history.forward

代码语言：javascript
复制
history.forward()

返回上下页 history.go

代码语言：javascript
复制
history.go(-1)

screen 对象#

屏幕宽度 screen.width

代码语言：javascript
复制
var str = screen.width // 1920

屏幕高度 screen.height

代码语言：javascript
复制
var str = screen.height // 1080

document 对象#

浏览器缓存 document.cookie

cookie 是最原始的浏览器缓存，cookie 会有过期时间，如果不设置则关闭当前浏览器窗口则会立即失效。cookie 的存储数据的上限是 4kb。

代码语言：javascript
复制
// 设置cookie

document.cookie = 'name=xiaoming;'


// 访问cookie

var str = document.cookie //  'name=xiaoming';


// 删除cookie

document.cookie = ''

文档标题 document.title

代码语言：javascript
复制
document.title = 'my-title'

打印内容 document.write

代码语言：javascript
复制
document.write('我是内容')

#前端工程化#javascript