BOM
// BOM操作:操作浏览器(通过js的方式实现浏览器中的某些功能)
// a)通过js的方式实现页面刷新效果
// b)通过js的方式,实现浏览器的上一页、下一页
// c)通过js的方式,实现页面的跳转
Window对象
window是浏览器对象,又称为顶级对象
特点:
凡是window对象中的属性或方法,window顶级对象都可以忽略不写
location对象
本质是window对象的一个属性(location 或window.location)
作用:用来操作网页的URL地址(实现网页跳转)
常用属性和方法:
href属性获取完整的URL地址,对其赋值时用于地址的跳转
<div style="background-color: red; height: 100px;width: 100px;">
</div>
<script>
// location对象用法
// a)设置页面跳转:window.location.href='跳转地址'
// b)获取当前页面url地址:window.location.herf
let div = document.querySelector('div');
div.onclick = function () {
window.location.href = 'http://www.baidu.com'
}
//
</script>
search属性获取地址中携带的参数,符号?后面部分
<form action="">
<input type="text" name="uname">
<input type="submit">
</form>
</div>
<script>
console.log(location.search)
</script>
hash属性获取地中的哈希值,符号#后面部分
reload方法用来刷新当前页面,传入参数true时表示强制刷新
刷新页面设置不同的布尔值区别:
1、location.reload(true) 代表刷新页面的时候,重新向服务器发送请求
2、.location.reload(false) 代表刷新页面的时候,只会在本地缓存中获取数据
navigator对象
//作用:
//1.保存了浏览器自身相关的信息
//2.记录了当前网络状态
history对象
作用:用来记录当前浏览器中访问过的页面
history.back() //对应的功能就是浏览器中的后退按钮
history.forward() //对应的功能就是浏览器中的前进按钮
history.go(整数或负数) //整数表示前进。负数表示后退
延时函数
<script>
// 延时函数:
// 语法:
// setTimeout(function(),延迟时间)
// 特点:延迟函数中的代码延迟执行
// 停止延迟函数 clearTimeout(延迟函数id)
// 应用场景:网页中自动隐藏广告效果,自动消失的提示信息
// 间歇函数
// 语法:
// setInterval(function(){},时间间隔)
// 特点:每隔一段时间执行一次
// clearInterval(间歇函数id)
// 应用场景:网页中的倒计时、轮播图
</script>
本地存储
将数据永久化保存(和数据库同原理)
本地存储的分类:localStorage(重点)+sessionStorage
localStorage(sessionStorage方法一模一样)
<script>
// a)通过本地存储保存数据(添加数据):localStorage.setItem('自定义键',值)
// 代码演示:
localStorage.setItem('uname', '老段')
localStorage.setItem('uname1', '老段1')
// b)获取本地存储中的数据 localStorage.getItem('键')
console.log(localStorage.getItem('uname'))
// c)删除本地存储中的数据:localStorage.removeItem('键')
// d)清空本地存储:本地存储中的所有数据全部删除:localStorage.clear()
</script>
本地存储保存其他类型的数据
<script>
let obj = {
uname: 'zs',
age: 23,
height: 30
}
// 本地存储还可以保存对象
localStorage.setItem('student', obj)
// 直接保存对象,看不到数据,不推荐直接保存
// 如果要保存对象格式的数据,则推荐将对象格式的数据进行转换
// JSON.stringify(对象),数据类型为字符串,长者像对象的字符串
localStorage.setItem('student2', JSON.stringify(obj))
//如果得到的结果是一个字符串,那我们推荐将我们的字符串转化为对象
//JSON.parse(结果)
</script>
字符串与对象的转化
<script>
let obj = {
uname: 'zs',
age: 23,
height: 30
}
let res1 = JSON.stringify(obj)
console.log(res1)
console.log(JSON.parse(res1))
</script>
存储数组对象
<script>
let ary = [{ uanme: 'zs', age: 23, height: 180 }, { uanme: 'ls', age: 24, height: 160 }]
localStorage.setItem('test', ary)
localStorage.setItem('test2', JSON.stringify(ary))
</script>
二者区别
localStorage保存数据属于持久化保存(除非手动删除,否则数据一致存在)
sessionStorage保持的数据属于临时保存,保存的数据会随着页面的关闭而消失
localStorage保存的数据可以跨页面访问
sessionStorage保存的数据只能在当前页面使用