【WEB APIs】BOM-操作浏览器
目录
1. Window对象
1.1 BOM
1.2 定时器-延时函数
1.3 JS执行机制
1.4 location对象
1.6 history对象
2. 本地存储（重点）
2.1 介绍
2.2 分类
localStorage
sessionStorage
存储复杂数据类型
3. 综合案例—学生就业统计表
3.1 渲染业务
map()
join()
3.2 新增业务
3.3 新增业务
1. Window对象
1.1 BOM
console.log(document === window.document); //true
function fn() {
console.log(11);
}
window.fn()
var num = 10 //const let挂在自己的作用域内
console.log(window.num);1.2 定时器-延时函数
const img = document.querySelector('img')
setTimeout(function () {
img.style.display = 'none'
}, 3000)1.3 JS执行机制
1.4 location对象
//5秒后跳转
<a href="http://www.itcast.cn"><span>5</span>秒后跳转</a>
<script>
const a = document.querySelector('a')
let num = 5
let timerId = setInterval(function () {
num--
a.innerHTML = `<span>${num}</span>秒后跳转`
if (num === 0) {
clearInterval(timerId)
// 跳转
location.href = 'http://www.itcast.cn'
}
}, 1000)
</script>
1.5 navigator对象（复制）
立即执行函数
1.6 history对象
2. 本地存储（重点）
2.1 介绍
2.2 分类
localStorage
键一定记得加引号，不加当变量名看
本地存储只能存字符串类型
// localStorage.setItem('键', '值') 键一定记得加引号 不加当变量名看
localStorage.setItem('uname', 'hahah') //存储方式
console.log(localStorage.getItem('uname')); //获取方式
localStorage.removeItem('uname') //删除
localStorage.setItem('uname', 'llll') //有键是修改
//本地存储只能存字符串类型
localStorage.setItem('age', 18)
console.log(localStorage.getItem('age')); //18以字符串形式存储sessionStorage
存储复杂数据类型
const obj = {
uname: '小明',
age: 19,
gender: '男'
}
// 1.复杂数据类型存储必须转换成JSON字符串存储
localStorage.setItem('obj', JSON.stringify(obj))
//JSON对象 {"uname":"小明","age":19,"gender":"男"}
// 2.把JSON字符串转换成对象
console.log(JSON.parse(localStorage.getItem('obj')));3. 综合案例—学生就业统计表
3.1 渲染业务
map()
join()
3.2 新增业务
3.3 新增业务
<script>
// 参考数据
const initData = [
// {
// stuId: 1,
// uname: '迪丽热巴',
// age: 22,
// salary: '12000',
// gender: '女',
// city: '北京',
// time: '2099/9/9 08:08:08'
// }
]
// localStorage.setItem('data', JSON.stringify(initData))
// 1. 渲染业务
// 1.1 先读取本地存储的数据
const arr = JSON.parse(localStorage.getItem('data')) || []
console.log(arr)
// 1.2 利用map和join方法来渲染页面
const tbody = document.querySelector('tbody')
function render() {
const trArr = arr.map(function (ele, index) {
return `
<tr>
<td>${ele.stuId}</td>
<td>${ele.uname}</td>
<td>${ele.age}</td>
<td>${ele.gender}</td>
<td>${ele.salary}</td>
<td>${ele.city}</td>
<td>${ele.time}</td>
<td>
<a href="javascript:" data-id="${index}">
<i class="iconfont icon-shanchu"></i>
删除
</a>
</td>
</tr>
`
})
console.log(trArr)
// join把数组转换为字符串 追加给tbody
tbody.innerHTML = trArr.join('')
// 显示共计有几条数据
document.querySelector('.title span').innerHTML = arr.length
}
render()
// 2.新增业务
const info = document.querySelector('.info')
const uname = document.querySelector('.uname')
const age = document.querySelector('.age')
const salary = document.querySelector('.salary')
const gender = document.querySelector('.gender')
const city = document.querySelector('.city')
info.addEventListener('submit', function (e) {
e.preventDefault() // 阻止默认提交行为
// 非空判断
if (!uname.value || !age.value || !salary.value) {
return alert('输入内容不能为空')
}
// 获取表单元素的值，并追加进数组中
arr.push({
stuId: arr.length ? +arr[arr.length - 1].stuId + 1 : 1, //确保id不重复 要考虑数组长度为0的情况
uname: uname.value,
age: age.value,
salary: salary.value,
gender: gender.value,
city: city.value,
time: new Date().toLocaleString()
})
render()
this.reset() //重置表单
// 把数组转为JSON字符串存入本地存储中
localStorage.setItem('data', JSON.stringify(arr))
})
// 3.删除业务
// 采用事件委托的形式，给tbody注册点击事件
tbody.addEventListener('click', function (e) {
if (e.target.tagName === 'A') {
if (confirm('确认删除')) { //点击确定返回true，否则false
arr.splice(e.target.dataset.id, 1) //通过自定义属性知道要删除数组的第几条元素
render()
localStorage.setItem('data', JSON.stringify(arr)) //数组更改，本地存储也改，要保证本地存储存最新数据
}
}
})
</script>