BOM
五个对象
window:浏览器窗口
1. 是js中*对象.所有的全局函数,全局属性都是window对象的成员(属性+方法)
2. 只要是window对象的成员,在使用时可以省略window
3. window对象有一些特殊的属性不能被覆盖.例如top不能作为全局变量名
window对象两个方法
1. 打开新窗口: window.open()
2. 关闭新窗口: window.close()
window对象事件
1. window.onload事件: dom树+外部资源 加载完成后执行
2. window.onbeforeunload事件: 页面关闭之前执行
-
window.onunload事件: 页面正在关闭
location: 网址栏
-
使用最多的属性(网页跳转): location.herf = ' '
-
location对象三个方法:
location.assign(): 跳转网页 与location.herf一致
location.replace():替换网页 使用较少,因为替换后不能回退
location.reload(): 刷新网页 一般用于移动端
history: 历史记录
1. history三个方法:
history.back(): 返回上一页 等价于 history.go(-1)
history.forward(): 前进下一页 等价于 history.go(1)
history.go(数字): 到历史记录的具体那一页
正数:前进 1:前进1页 2:前进2页
负数:回退 -1:回退1页 -2:回退2页
0 刷新
navigator: 浏览器信息
作用: 收集用户信息
screen: 屏幕分辨率
存储对象Storage
localStorage
1. localStorage对象作用:存储数据
经典应用:免登陆
2. localStorage语法:
存数据: localStorage.setItem('属性名',属性值)
取数据: localStorage.getItem('属性名')
删数据: localStorage.removeItem('属性名')
清空数据: localStorage.clear()
3. localStorage注意点:
3.1 永久存储: 除非手动清除,否则一直存在
3.2 只能存储字符串类型,如果存储其他类型,编译器会自动tostring()转成字符串存储
sessionStorage
1. sessionStorage对象作用:存储数据
经典应用: 页面间传值
2. sessionStorage语法:
存数据: sessionStorage.setItem('属性名',属性值)
取数据: sessionStorage.getItem('属性名')
删数据: sessionStorage.removeItem('属性名')
清空数据: sessionStorage.clear()
3. sessionStorage注意点:
3.1 临时存储: 只要窗口关闭了就自动清除了
3.2 只能存储字符串类型,如果存储其他类型,编译器会自动tostring()转成字符串存储
localStorage与sessionStorage的区别
1. localStorage与sessionStorage的异同点:
相同点: 作用相同,都是存储数据
不同点: 储存方式不同
localStorage: 硬盘存储 应用场景: 免登陆
sessionStorage: 内存存储 应用场景: 页面间传值
2. localStorage与sessionStorage在使用的时候的注意点:
只能存储字符串类型数据,如果存储其他类型则编译器自动调用toString()转成字符串
3. 如何解决storage存储对象只能存储字符串问题?(如何存储引用类型)
使用json格式存储
存: 先转json格式,后存储
localStorage.setItem( 'user',JSON.stringify( obj ) )
取: 先取json格式,后转js对象
let js = JSON.parse( localStorage.getItem('user')
json数据格式
1. json是什么?
json是一种数据格式,本质是字符串类型.
实际开发中,网页中的数据都是来源于网络服务器.而服务器不是js语言开发,而是其他编程语言:Java, c++, phython, go, c#, net...而且后台也不是只为前端服务,也需要安卓端和iOS端服务器.
不同的编程语言,数据类型不同.他们是不互通的.后来人们就发明了一种通用的数据格式,让所有的编程语言都支持.这就是json格式.
2. json作用:
数据跨平台传输问题
3. json语法:
本质是字符串
json格式 -> js对象: let js对象 = JSON.parse(json格式)
js对象 -> json格式: let json格式 = JSON.stringify(js对象)
localStorage存储对象类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>localStorage存储对象类型</h1>
<div class="btn1">存对象</div>
<div class="btn2">取对象</div>
<script>
let obj = {
uname: '端端',
hobby: ['吃饭', '睡觉', '追剧']
}
// 存对象
document.querySelector('.btn1').onclick = function () {
/* // 1. 先把js对象 -> json格式
let json = JSON.stringify(obj)
// 2. 再把json格式存入localStorage
localStorage.setItem('user', json) */
localStorage.setItem('user', JSON.stringify(obj))
}
// 取对象
document.querySelector('.btn2').onclick = function () {
/* // 1. 先从localStorage取出json格式
let json = localStorage.getItem('user')
// 2. 再把json格式 -> js对象
let js = JSON.parse(json) */
let js = JSON.parse(localStorage.getItem('user'))
console.log(js)
}
</script>
</body>
</html>