10.Window对象
(1)BOM(浏览器对象模型)
1.window
对象是一个全局对象,也可以说是JavaScript
中的顶级对象。
2.像document、alert()、console.log()
这些都是window的属性,基本BOM的属性和方法都是window的。
3.所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法。
4.window对象下的属性和方法调用的时候可以省略window。
(2)定时器-延时函数
一个用来让代码延迟执行的函数。
语法:setTimeout(回调函数, 延迟时间即等待的毫秒数)
备注:
1.setTimeout
仅仅只执行一次,所以可以理解为就是把一段代码延迟执行。
2.间歇函数 setInterval
: 每隔一段时间就执行一次。
清除延时函数:
let timer=setTimeout(回调函数,等待的毫秒数)
clearTimeout(timer)
备注:
1.延时函数需要等待,所以后面的代码先执行
2.返回值是一个正整数,表示定时器的编号
<body>
<img src="./images/ad.png" alt="">
<script>
// 1.获取元素
const img = document.querySelector('img')
setTimeout(function () {
img.style.display = 'none'
}, 3000)
</script>
</body>
(3)JS执行机制
1.JS为单线程,也就是同一时间只能做一件事。因此所有任务需要排队,前一个任务结束才会执行下一个任务。这样如果某个任务执行时间太长,则会造成页面渲染不连贯,导致渲染加载阻塞。因此,出现了允许JS脚本创建多个线程,出现了同步和异步。
2.同步:前一个任务结束后才会执行后一个任务,程序执行顺序与任务排列顺序是一致的、同步的。异步:在做一件事的同时可以处理其他事情。本质区别:流水线上各个流程的执行顺序不同。
3.同步任务:同步任务都在主线程上执行,形成一个执行栈。异步任务:通过回调函数实现的(需要耗时的)。
4.异步任务:普通事件(click、resize
);资源加载(load、error
);定时器(setInterval、setTimeout
)。异步任务添加到任务队列中,也叫消息队列。
5.执行机制:
(1)先执行执行栈中的同步任务;
(2)当有异步任务时,提交给对应的异步进程处理,处理完的异步任务放入任务队列中;
(3)执行栈执行完毕后,会按次序读取任务队列中的异步任务,被读取的任务结束等待状态进入执行栈,开始执行。重复该动作即为事件循环(event loop
)。
(4)location对象
location
(地址) 它拆分并保存了 URL 地址的各个组成部分, 它是一个对象。
属性/方法 | 说明 |
---|---|
href | 属性,获取完整的 URL 地址,赋值时用于地址的跳转 |
search | 属性,获取地址中携带的参数,符号 ?后面部分 |
hash | 属性,获取地址中的啥希值,符号 # 后面部分 |
reload() | 方法,用来刷新当前页面,传入参数 true 时表示强制刷新 |
<body>
<form action="">
<input type="text" name="username">
<input type="password" name="pwd">
<button>提交</button>
</form>
<a href="#/my">我的</a>
<a href="#/friend">关注</a>
<a href="#/download">下载</a>
<button class="reload">刷新</button>
<script>
// console.log(window.location)
// console.log(location)
// console.log(location.href)
// 1. href 经常用href 利用js的方法去跳转页面
// location.href = 'http://www.baidu.com'
const reload = document.querySelector('.reload')
reload.addEventListener('click', function () {
// f5 刷新页面
// location.reload()
// 强制刷新 ctrl+f5
location.reload(true)
})
</script>
</body>
(5)navigator对象
navigator
是对象,该对象下记录了浏览器自身的相关信息
通过 userAgent
检测浏览器的版本及平台。
<script>
// 检测 userAgent(浏览器信息)
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone,则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn'
}
})();
// !(function () { })();
!function () { }()
</script>
</head>
<body>
这是pc端的页面
<script>
// (function () { })()
</script>
</body>
(6)histroy对象
history (历史)是对象,主要管理历史记录,该对象与浏览器地址栏的操作相对应,如前进、后退等。
对象方法 | 作用 |
---|---|
back( ) | 可以后退功能 |
forward( ) | 前进功能 |
go(参数) | 前进后退功能,参数如果是1前进一个页面,是-1则后退一个页面 |
<body>
<button>后退</button>
<button>前进</button>
<script>
const back = document.querySelector('button:first-child')
const forward = back.nextElementSibling
back.addEventListener('click', function () {
// 后退一步
// history.back()
history.go(-1)
})
forward.addEventListener('click', function () {
// 前进一步
// history.forward()
history.go(1)
})
</script>
</body>
11.本地存储
(1)介绍
本地存储:将数据存储在本地浏览器中
使用场景:https://todomvc.com/examples/vanilla-es6/> 页面刷新数据不丢失
好处:
1、页面刷新或者关闭不丢失数据,实现数据持久化
2、容量较大,sessionStorage和 localStorage 约 5M 左右
(2)本地存储分类——localStorage
1.目标:能够使用localStorage把数据存储的浏览器中。
2.作用:数据可以长期保留在本地浏览器中,刷新页面和关闭页面,数据也不会丢失。
3.特性:可以多窗口共享;以键值对的形式存储,并且存储的是字符串, 省略了window。
4.语法:
存储数据:localStorage.setItem(key,value)
读取数据:localStorage.getItem(key)
删除数据:localStorage.removeItem(key)
//右键检查,点击application的storage。
<body>
<script>
// 1. 要存储一个名字 'uname', 'pink老师'
// localStorage.setItem('键','值')
localStorage.setItem('uname', 'pink老师')
// 2. 获取方式 都加引号
console.log(localStorage.getItem('uname'))
// 3. 删除本地存储 只删除名字
// localStorage.removeItem('uname')
// 4. 改 如果原来有这个键,则是改,如果没有这个键是增
localStorage.setItem('uname', 'red老师')
// 我要存一个年龄
// 2. 本地存储只能存储字符串数据类型
localStorage.setItem('age', 18)
console.log(localStorage.getItem('age'))
</script>
</body>
另一种分类:sessionStorage
特性:
1.生命周期为关闭浏览器窗口;
2.在同一个窗口下数据可以共享;
3.以键值对的形式存储使用;
4.用法和localStorage基本相同。
区别是:当页面浏览器被关闭时,存储在 sessionStorage 的数据会被清除。
存储:sessionStorage.setItem(key,value)
获取:sessionStorage.getItem(key)
删除:sessionStorage.removeItem(key)
(3)localStorage 存储复杂数据类型
问题:本地只能存储字符串,无法存储复杂数据类型。
解决:需要将复杂数据类型转换成 JSON字符串,在存储到本地。
语法:JSON.stringify(复杂数据类型)
JSON字符串:
1.首先是1个字符串
2.属性名使用双引号引起来,不能单引号
3.属性值如果是字符串型也必须双引号
问题:因为本地存储里面取出来的是字符串,不是对象,无法直接使用。
解决: 把取出来的字符串转换为对象。
语法:JSON.parse(JSON字符串)
<body>
<script>
const obj = {
uname: 'pink老师',
age: 18,
gender: '女'
}
// 1.复杂数据类型存储必须转换为 JSON字符串存储
localStorage.setItem('obj', JSON.stringify(obj))
// JSON 对象 属性和值有引号,而是引号统一是双引号
// {"uname":"pink老师","age":18,"gender":"女"}
// 取
// console.log(typeof localStorage.getItem('obj'))
// 2. 把JSON字符串转换为 对象
const str = localStorage.getItem('obj') // {"uname":"pink老师","age":18,"gender":"女"}
console.log(JSON.parse(str))
</script>
</body>