本文主要介绍了使用 JavaScript 操作浏览器对象模型（BOM）的相关知识。包括获取浏览器窗口尺寸、地址信息，实现刷新、前进回退功能，以及 onload 和 onscroll 事件。还讲解了浏览器的本地存储（localStorage）和临时存储（sessionStorage）的使用方法，如存储、删除、清除和获取数据，同时提及了 JSON 的两个方法。
1.认识 BOM
浏览器对象模型
可以理解为 浏览器给我们提供了一系列方法
1. 可以打开一个浏览器弹窗框
2. 记录当前窗口大小
3. 操作页面跳转
2.获取浏览器窗口尺寸
JS 的全局作用域, 有一个 window 对象, 我们 BOM 的方法都在他里边
使用的时候 语法 window.XXX 但是 window可以忽略不写
console.log(window.innerHeight)
console.log(window.innerWidth)
3。浏览器地址信息
浏览器的地址信息
window 有一个 location 内部记录了浏览器的地址信息
location 内部有一个 href 属性, 可以获取当前浏览器的地址, 也可以给他赋值新地址, 实现页面跳转
4.浏览器的刷新功能
浏览器的刷新功能
window 对象内部有一个 location 他的内部有一个 reload 方法
这个方法就是 刷新
注意：不能写在外部，写在条件里面
5.浏览器的前进与回退
浏览器的历史记录(模拟左上角的回退与前进)
window 内部有一个 history 内部有方法能够让我们能实现浏览器的 前进回退功能
window.history.back() 回退
window.history.forward() 前进(必须现有过一次回退, 才能使用前进)
6.浏览器的onload事件
浏览器的onload事件
onload 事件, 等到页面的所有资源加载完毕后在执行
浏览器的图片加载是异步的
7.浏览器的 onscroll 事件
其实就是浏览器的滚动事件, 浏览器页面滚动的时候会触发
window.onscroll = function () {
console.log('页面滚动~~~~~')
}
浏览器的滚动距离
因为是页面滚动, 所以需要使用 document 对象去获取滚动的距离
方法:
document.body.scrollTop 在浏览器没有声明 <!DOCTYPE html>
document.documentElement.scrollTop 在浏览器声明了 <!DOCTYPE html>
document.body.scrollLeft 在浏览器没有声明 <!DOCTYPE html>
document.documentElement.scrollLeft 在浏览器声明了 <!DOCTYPE html>
8.浏览器的本地存储
1. localStorage
浏览器的本地存储(永久存储), 打开浏览器存储上之后, 关闭浏览器, 信息还在
2. sessionStorage
3. cookie
1. localStorage 的存储语法 window.localStorage.setItem(key, value)
注意: value 的值必须为 字符串
key 的书写 符合见名知意
window.localStorage.setItem('qq', '888888')
window.localStorage.setItem('mima', '666666')
window.localStorage.setItem('ceshi3', '3333333333')
window.localStorage.setItem('ceshi4', '4444444444')
window.localStorage.setItem('ceshi5', '555555555')
window.localStorage.setItem('a', '666666666666')
2. localStorage 的删除语法 window.localStorage.removeItem(key)
window.localStorage.removeItem('ceshi1')
3. localStorage 的清除语法 window.localStorage.clear()
window.localStorage.clear()
4. localStorage 的获取语法 window.localStorage.getItem(key)
console.log(window.localStorage.getItem('qq'))
9.浏览器的临时存储
sessionStorage
浏览器的临时存储
特点: 页面关闭直接清除数据
设置语法
window.sessionStorage.setItem(key, value) value 的值必须为 字符串
window.sessionStorage.setItem('VX', '@@@88888@@@@')
获取语法
console.log(window.sessionStorage.getItem('VX'))
删除语法
window.sessionStorage.removeItem('VX')
清除语法
window.sessionStorage.clear()
JSON 的两个方法
var obj = [1, 2, 3, 4, 5]
window.sessionStorage.setItem('OBJ', JSON.stringify(obj)) // 1. JSON.stringify() 将其他类型的数据, 转为字符串格式
var newObj = JSON.parse(window.sessionStorage.getItem('OBJ')) // 2. JSON.parse 将字符串的数据类型还原
console.log(newObj)
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
