目录

1. Window对象

1.1 BOM

1.2 定时器-延时函数

1.3 JS执行机制

1.4 location对象

1.5 navigator对象（复制）

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); //truefunction 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 = 5let 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，否则falsearr.splice(e.target.dataset.id, 1) //通过自定义属性知道要删除数组的第几条元素render()localStorage.setItem('data', JSON.stringify(arr)) //数组更改，本地存储也改，要保证本地存储存最新数据}}})</script>