一、window对象
1.BOM
BOM(Browser Object Model)是浏览器对象模型
- window是浏览器内置的全局对象,我们所学的所有Web APIs的知识内容都是基于window对象实现的
- window对象包含了navigator、location、document、history、screen五个属性,即所谓的BOM(浏览器对象模型)
- document是实现DOM的基础,它其实是依附于window的属性
- 备注:依附于window对象的所有属性和方法,使用时可以省略window
2.延时器
- JavaScript内置的一个用来让代码延迟执行的函数,叫setTimeout
- 语法:
setTimeout(回调函数,等待的毫秒数)
复制代码
- setTimeout仅仅只执行一次,所以可以理解为就是把一段代码延迟执行,平时省略window
- 清除延时函数:
let timer = setTimeout(回调函数,等待的毫秒数)
clearTimeout(timer)
复制代码
结合递归函数可以使用setTimeout(延时器)实现setInterval(定时器)一样的功能
<script>
let index = 0
function func(){
console.log(++index)
setTimeout(func,1000)
}
func()
</script>
复制代码
两种定时器对比:
-
setInterval 的特征是重复执行,首次执行会延时
-
setTimeout 的特征是延时执行,只执行 1 次
-
setTimeout 结合递归函数,能模拟 setInterval 重复执
-
clearTimeout 清除由 setTimeout 创建的定时任务
- 创建的定时器应该由clearInterval来清除
- 创建的延迟器应该由clrearTimeout来清除
3.location对象
①:location的数据类型是对象,它拆分并保存了URL地址的各个组成部分
②:常用属性和方法
-
href属性获取完整的URL地址,对其赋值时用于地址跳转
<button>点击点击</button> <script> const btn = document.querySelector('button') btn.addEventListener('click',function(){ location.href = "http://www.baidu.com" // location.href = location.href //刷新功能 }) </script> 复制代码
-
search属性获取地址中携带的参数,符号?后面部分
console.log(location.search) 复制代码
-
hash属性获取地址中的哈希值,符号#后面的部分
console.log(location.hash) 复制代码
-
reload方法用来刷新当前页面,传入参数true时表示强制刷新
<button>点击点击</button> <script> const btn = document.querySelector('button') btn.addEventListener('click',function(){ location.reload = true //强制刷新 }) </script> 复制代码
4.navigator对象
navigator的数据类型是对象该对象记录了浏览器自身的相关信息
常用的属性和方法
通过userAgent检测浏览器的版本及平台
// 检测 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'
}
})()
复制代码
5.history对象
history的数据类型是对象,该对象与浏览器地址栏的操作相对应,如前进、后退、历史记录等
常用属性和方法
history对象方法 | 作用 |
---|---|
back() | 后退功能 |
forward() | 前进功能 |
go(参数 | 前进或后退,若参数为1,前进一个页面,-1后退一个页面 |
<a href="http://www.baidu.com">百度</a>
<button class="forward">前进</button>
<button class="back">后退</button>
<script>
const forward = document.querySelector('.forward')
const back = document.querySelector('.back')
forward.addEventListener('click',function(){
// history.forward()
history.go(1) //前进一个记录
})
back.addEventListener('click',function(){
// history.back()
history.go(-1) //后退一个记录
})
</script>
复制代码
二、本地存储
- 数据存储在用户浏览器中
- 设置、读取方便、甚至页面刷新不丢失数据
- 容量较大,sessionStorage和localStorage约 5M 左右
1.localStorage
- 生命周期永久生效,除非手动删除,否则关闭页面也会存在
- 可以多窗口(页面)共享(同一浏览器可以共享)
- 以键值对的形式存储使用
本地存储 四个api
1 存 localStorage.setItem(key,value)
2 取 localStorage.getItem(key)
3 删除一个 localStorage.removeItem(key)
4 清空 localStorage.clear();
复制代码
2.复杂数据类型存储
本地存储只能存储字符串,无法存储复杂数据类型,需要将复杂数据类型转换成JSON字符串,再存储到本地
JSON.stringify(复杂数据类型)
将复杂数据类型转换成JSON字符串,存储到本地存储中
//数组转为字符串
const strArr = JSON.stringify(arr)
//本地存储
localStorage.setItem('arr',strArr)
复制代码
JSON.parse(JSON字符串)
将JSON字符串转换成对象 取出 时候使用
//获取本地存储
const strArr = localStorage.getItem('arr')
let arr = []
//转换为数组
arr = JSON.parse(strArr)
复制代码
3.sessionStorage(了解)
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
- 以键值对的形式存储使用
- 用法跟localStorage 基本相同
\