BOM 五大对象
window对象： 当前浏览器窗口
1 . window 对象特点
- window 是 JavaScript 中的顶级对象, 所有的全局函数、全局对象都是 window 对象的方法
- 例如
document、alert()、setInterval()、setTimeout()等等
- 例如
- window 对象的成员( 属性 + 方法 ) , 使用时都可以省略 window
- window 对象有一个特殊的属性叫做 top , 指向 window 对象本身。
- 细节： top 这个变量名是无法被覆盖的，就算你自己声明 top ，它还是指向 window 。
- 所以我们声明变量的时候，最好不要叫 top 。 平时声明变量最好添加前缀，使用驼峰命名
- 细节： top 这个变量名是无法被覆盖的，就算你自己声明 top ，它还是指向 window 。
//top变量不能声明，一定是指向window
console.log(top) // Window {}
2 . window 对象的两个常用方法
window.open() : 打开窗口
四个参数
- 参数1 (
String类型 )url: 要打开的网址路径 - 参数2 （
String类型 ）target: 相当于 a 标签的target: _self- 默认值为 ：
target:_blank
- 默认值为 ：
- 参数3 （
String类型 )features: 新窗口特征（尺寸 位置等），用于开启窗中窗- 值为:
'left=200px,top=200px,width=300px,height=300px'
- 值为:
- 参数4 (
Boolean类型 )replace: 是否替换当前历史记录
window.open('http://www.juejin.cn','_blank','left=200px,top=200px,width=300px,height=300px')
window.close() 关闭窗口
document.querySelector('.close').onclick = function () {
window.close()
}
3 . window 对象事件
window.onload 事件 ： 页面dom树 + 外部资源 加载完毕后执行
- 注意 ： js 代码如果写在 body 上方，就会导致无法获取 dom 元素.因为代码从上往下解析，如果 js 写在 body 上方就会导致解析 js 代码的时候，body 里面的元素还没有渲染
- 应用 ：
window.onload事件 可以让你的 js 在任何位置都可以获取页面元素
<head>
<script>
// 注册 window.onload 事件
window.onload = function () {
console.log('页面dom树 + 外部资源 加载完毕')
let box = document.querySelector('.box')
console.log(box)
}
</script>
</head>
<body>
<div class="box">我是div</div>
</body>
window.onbeforeunload 事件 ： 页面关闭前执行
- 应用 ： 存储一些重要数据
window.onbeforeunload = function(){
console.log('页面关闭前执行')
}
window.onunload 事件 ： 页面正在关闭
window.onunload = function(){
console.log('页面正在关闭')
}
location 对象 : 网页地址栏(url)
地址栏对象，存储地址栏所有的数据
1 . location 对象的常用属性
location.href : 完整网址
- js跳转网页 ： 修改 location 对象的 href 属性来实现的
location.href = 'http://www.juejin.cn'
location.host : 主机名（域名）
location.search : 网络参数
location.hash : 锚点定位
- 资源定位符 : 可以让你的网页滚动到执行的元素位置
2 . location 对象的方法
location.assign( 'url' ) : 跳转网页（可以回退）
location.assign('http://www.juejin.cn')- 等价写法：
location.href = 'url'
location.replace( 'url' ) : 替换网页（不可以回退）
location.replace('http://www.baidu.com')
location.reload(): 刷新页面- 调用方法即可实现网页刷新效果
location.reload()
history 对象 : 历史记录
history 对象 常用方法
history.back(): 回退上一页history.forward(): 前进下一页history.go( 数字 ):- 正数： 前进几页
history.go(2): 前进 2 页 - 0 ： 刷新
- 负数： 回退几页
history.go(-2): 回退 2 页
- 正数： 前进几页
navigator 对象 ： 浏览器用户信息
浏览器型号 版本，用户操作系统信息
navigator 对象常用属性
navigator.userAgent字符串类型 ： 用户代理 获取具体详细信息- 应用 : 用户数据收集
5 . screen 对象 : 电脑屏幕分辨率(不常用)
localStorage 与 sessionStorage
localStorage
1 . localStorage 作用 : 本地存储
- 经典场景 ： 免登录
2 . localStorage 语法 ： - 2.1 存数据 ：
localStorage.setItem('属性名',属性值) - 2.2 取数据 :
localStorage.getItem('属性名') - 2.3 删数据 :
localStorage.removeItem('属性名') - 2.4 清空数据 ：
localStorage.clear()
3 . localStorage 特点 ：
- 3.1 localStorage 是 永久存储 的， 除非 手动清除 ，否则一直存在。
- 3.2 localStorage 只能存储 字符串类型 数据。 如果是其他类型，则会自动转成字符换格式存储。
sessionStorage
1 . sessionStorage 作用 ： 临时存储
- 经典场景 ： 页面间传值
2 . sessionStorage 语法和 localStorage 完全一致 ：
- 2.1 存数据 ：
sessionStorage.setItem('属性名',属性值) - 2.2 取数据 :
sessionStorage.getItem('属性名') - 2.3 删数据 :
sessionStorage.removeItem('属性名') - 2.4 清空数据 ：
sessionStorage.clear()
3 . sessionStorage 特点 ：
- 3.1 sessionStorage 页面关闭后就 自动清除 了。
- 3.2 sessionStorage 只能存储 字符串类型 数据。 如果是其他类型，则会自动转成字符换格式存储。
localStorage 与 sessionStorage 的异同点 ：
相同点 ： 功能一致，都是存储数据
不同点 ： 存储方式不同
- localStorage : 硬盘存储
- sessionStorage : 内存存储
localStorage 如何存储其他类型数据 ：
localStorage 使用JSON格式存储
- 存： 转成 json 格式字符串来存储
JSON.stringify(js) - 取： 取出json格式后转成js对象
JSON.parse(json)
localStorage 与 sessionStorage 经典应用案例
essionStorage 经典场景 ： 页面间传值
essionStorage 页面间传值思路 :
- 在传值页面点击
button下一页的时候：先把数据存入sessionStorage - 在接收读取上一个页面存在
sessionStorage中的值 - 渲染页面并发送到服务器
传值页面代码 :
<body>
<input class="username" type="text" placeholder="请输入您的账号" />
<br />
<input class="password" type="text" placeholder="请输入您的密码" />
<br />
<!-- js行内式 -->
<button
onclick=" location.href='./接收页面.html' "
>
下一页
</button>
<script>
document.querySelector('button').addEventListener('click', function () {
//点击下一页的时候：先把数据存入sessionStorage
sessionStorage.setItem(
'username',
document.querySelector('.username').value
)
sessionStorage.setItem(
'password',
document.querySelector('.password').value
)
})
接收页面代码 :
<body>
<input class="name" type="text" placeholder="请输入姓名" />
<br />
<input class="age" type="text" placeholder="请输入年龄" />
<br />
<input class="address" type="text" placeholder="请输入收货地址" />
<br />
<button>注册</button>
<script>
document.querySelector('button').onclick = function () {
//1.先读取本页面的表单值
let name = document.querySelector('.name').value
let age = document.querySelector('.age').value
let address = document.querySelector('.address').value
//2.读取上一个页面存在sessionStorage中的值
let username = sessionStorage.getItem('username')
let password = sessionStorage.getItem('password')
//3.将两个页面数据一起发给服务器
console.log(name, age, address, username, password)
}
localStorage 经典场景 ： 免登录
localStorage 存储其他类型的思路 :
- 存 ： 要把 js 对象转成 json 格式存储
- 取 ： 先取出 json 格式数据
- 将取出的 json 转成 js 对象
let js = { name: '张三', age: 18, eat: [1, 2, 3] }
// 1.存
//(1)把js转成json (2)存储json格式
localStorage.setItem('user', JSON.stringify(js) )
// 2.取
// let jsonData = localStorage.getItem('user')
// 3. 转成js对象
// let jsData = JSON.parse( jsonData )
// (1)取出json格式数据 (2)转成js对象
let jsData = JSON.parse( localStorage.getItem('user') )
console.log(jsData)