06-JS-web API-window对象-拓展-元素属性-本地(会话)存储
1 window对象-BOM-location-history-navigator
BOM(Browser Object Model ) 是浏览器对象模型
window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的
window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模 型）
document 是实现 DOM 的基础，它其实是依附于 window 的属性。
注：依附于 window 对象的所有属性和方法，使用时可以省略 window
1 window对象-location对象
location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
常用属性和方法：
1 href 链接
1 使用a标签 href 属性 可以实现页面跳转,也可以修改他的链接地址
2 在js中，也可以直接跳转 location.href 来跳转
3 location.href 也可以实现刷新 location.href = location.href;
location.href='http://wwww.baidu.com' //指定网页跳转
2 reload 刷新
reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新
// reload实现刷新
location.reload(true) //true 点击时也会强制刷新
3 search 获取符号 ？后面部分
search 属性获取地址中携带的参数，了 获取 url上 ？ 后面一串字符 ?/17-location.html?a=1&b=2
// search 能获取 url上 ? 后面一串字符串 ?a=1&b=2
console.log(location.search);
4 hash 获取符号 # 后面部分
hash 属性获取地址中的啥希值， 获取 # 后面一串字符 /17-location.html#/index #/index
// hash 能获取 # 后面一串字符串
console.log(location.hash);//#/index
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>跳转到百度</button>
<script>
// 1 使用a标签 href 属性 可以实现页面跳转
// 2 在js中，也可以直接跳转 location.href 来跳转
// 3 location.href 也可以实现刷新 location.href = location.href;
// 4 location.reload(true);// true 强制刷新！
// 5 search 后一个阶段就会用到它 了 获取 url上 ？ 后面一串字符 /17-location.html?a=1&b=2
// 6 hash 学习到了vue阶段就会用到了 获取 # 后面一串字符 /17-location.html#/index #/index
const button=document.querySelector('button')
button.addEventListener('click',function(){
location.href='http://wwww.baidu.com' //指定网页跳转
// 可以获取当前的地址
// console.log(location.href);//http://127.0.0.1:5500/16-location.html
// 刷新功能
// location.href=location.href
// reload实现刷新
// location.reload(true) //true 点击时也会强制刷新
// search 能获取 url上 ? 后面一串字符串 ?a-q1
// console.log(location.search);
// hash 能获取 # 后面一串字符串
console.log(location.hash);
})
// 用延时器,可以实现,不用点击,也会跳转
setTimeout(function(){
// location.href='http://wwww.baidu.com'
},5000)
</script>
</body>
</html>
2 window对象-history对象
history 的数据类型是对象，该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
常用属性和方法：
| history对象方法 | 作用 |
|---|---|
| back ( ) | 后退功能 |
| forward ( ) | 前进功能 |
| go ( 参数 ) | 前进后退功能 参数如果是 1 前进1个页面 如果是 -1 后退一个页面 |
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>19.history.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<button class="forward">前进</button>
<button class="back">后退</button>
<script>
const forward = document.querySelector('.forward');
forward.addEventListener('click', function () {
// history.forward();
history.go(1); // 前进一个记录
});
const back = document.querySelector('.back');
back.addEventListener('click', function () {
// history.back();
history.go(-1); // 后退一个记录
});
</script>
</body>
</html>
3 window对象-navigator对象
navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
作用:
检测当前浏览器的版本和型号
手机端来说
安卓手机 可以直接下载apk 手机软件的
ios 手机来说 不可以直接下载手机软件 必须要回到苹果的应用商店中来下载
常用属性和方法： 根据用户的设备类型返回对应的 页面
通过 userAgent 检测浏览器的版本及平台
可以识别出 当前的访问设备是 pc端还是移动端
后台根据 当前用户的设备类型 来返回 对应的平台的页面
pc端来访问我的页面 我给你显示pc端的页面
移动端来访问我的页面 我给你显示移动端的页面
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>18-navigator-useragent.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<a href="#">下载软件</a>
<script>
// 作用 检测当前浏览器的版本和型号
// 手机端来说， 安卓手机 可以直接下载apk 手机软件的
// ios 手机来说 不可以直接下载手机软件 必须要回到苹果的应用商店中来下载
// 安卓手机来说 点击 下载软件 给它下载apk
// iphone手机来说 点击 下载软件 可能只需给苹果手机一个提示
// 可以识别出 当前的访问设备是 pc端还是移动端
// 后台根据 当前用户的设备类型 来返回 对应的平台的页面
// pc端来访问我的页面 我给你显示pc端的页面
// 移动端来访问我的页面 我给你显示移动端的页面
// b站就是
// console.log(window.navigator.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';
// // }
// console.log(android);
// console.log(iphone);
// })();
// 系统检测 以及 浏览器版本
validBrowser()
function validBrowser() {
var u_agent = navigator.userAgent;
var browser_name = 'Failed to identify the browser';
if (u_agent.indexOf('Firefox') > -1) {
browser_name = 'Firefox';
} else if (u_agent.indexOf('Chrome') > -1) {
browser_name = 'Chrome';
} else if (
u_agent.indexOf('Trident') > -1 &&
u_agent.indexOf('rv:11') > -1
) {
browser_name = 'IE11';
} else if (
u_agent.indexOf('MSIE') > -1 &&
u_agent.indexOf('Trident') > -1
) {
browser_name = 'IE(8-10)';
} else if (u_agent.indexOf('MSIE') > -1) {
browser_name = 'IE(6-7)';
} else if (u_agent.indexOf('Opera') > -1) {
browser_name = 'Opera';
} else {
browser_name += ',info:' + u_agent;
}
document.write('browser_name:' + browser_name + '<br>');
document.write('u_agent:' + u_agent + '<br>');
}
</script>
</body>
</html>
2 拓展-区分属性和方法
属性的获取和使用 是用 = 等号
属性的获取和使用 是用 ( ) 括号
3 拓展-元素属性
1 固有属性
比如 id href src 点语法 的方式 获取 和 设置 方便
获取 dom元素的固有属性 通过点语法来获取 方便
// 获取 dom元素的固有属性 通过点语法来获取
const a = document.querySelector('a');
// 获取固有属性
// console.log(a.href);
// console.log(a.id);
// 直接修改
// a.href="http://www.qq.com";
// a.id="top";
2 自定义属性
自定义属性 不能直接通过 点语法来获取和设置
只能靠
获取 getAttribute("属性名")
设置 setAttribute(key,value)
删除 删除掉属性 removeAttribute(key)
// 自定义属性 不能直接通过点语法来获取和设置
// 获取 getAttribute("属性名")
// console.log(a.hello);
// console.log(a.aa);
// console.log( a.getAttribute("hello") );
// console.log( a.getAttribute("aa") );
// 设置 setAttribute(key,value)
// a.setAttribute("hello","123");
// 删除掉属性 removeAttribute(key)
// a.removeAttribute("hello");
3 H5建议 data- xxx
属性设置的时候必须是 data - 开头
获取的时候 dom.dataset.xxx
设置 dom.dataset.index = 3;
<a data-abc="123" >
获取（a.dataset.abc） 设置（a.dataset.abc=456）;
// 自定义属性 -> h5建议的 自定义属性
// 属性的时候 data-xxx 开头
// 获取的时候 a.dataset.xxx
// 设置 a.dataset.index = 3;
// console.log(a.dataset.index);
// a.dataset.index = 3;
4 最强大是 获取: getAttribute 设置: setAttribute 删除: removeAttribute
上述的这个方式，可以获取到任意的属性（固有属性和h5建议的自定义属性）
整体HTML示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>12-元素属性.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<a data-index="0" id="nav" href="http://www.baidu.com" hello="no" aa="bb" >跳转</a >
<script>
// 获取 dom元素的固有属性 通过点语法来获取
const a = document.querySelector('a');
// 获取固有属性
// console.log(a.href);
// console.log(a.id);
// 直接修改
// a.href="http://www.qq.com";
// a.id="top";
// 自定义属性 不能直接通过点语法来获取和设置
// 获取 getAttribute("属性名")
// console.log(a.hello);
// console.log(a.aa);
// console.log( a.getAttribute("hello") );
// console.log( a.getAttribute("aa") );
// 设置 setAttribute(key,value)
// a.setAttribute("hello","123");
// 删除掉属性 removeAttribute(key)
// a.removeAttribute("hello");
// 自定义属性 -> h5建议的 自定义属性
// 属性的时候 data-xxx 开头
// 获取的时候 a.dataset.xxx
// 设置 a.dataset.index = 3;
// console.log(a.dataset.index);
// a.dataset.index = 3;
/*
小结
标签的属性 有两种分为
1 固有属性 比如 id href src 点语法的方式获取和设置 方便
2 自定义属性
1 随机自己瞎命名
<a abc="123" >
获取 （getAttribute） 设置 setAttribute(key,value) 删除 removeAttribute(key)
2 h5建议 data- xxx
<a data-abc="123" >
获取（a.dataset.abc） 设置（a.dataset.abc=456）;
3 最强大是 （getAttribute） setAttribute removeAttribute
上述的这个方式，可以获取到任意的属性（固有属性和h5建议的自定义属性）
<a data-index="0" id="nav" href="http://www.baidu.com" hello="no" aa="bb" >跳转</a >
*/
// console.log( a.getAttribute("data-index") );
// console.log( a.getAttribute("id") );
// console.log( a.getAttribute("href") );
// console.log( a.getAttribute("hello") );
// console.log( a.getAttribute("aa") );
</script>
</body>
</html>
5 自定义属性的使用-案例示范:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>13-自定义属性使用演示.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<ul></ul>
<script>
// 根据数组 渲染出li标签 点击li标签的时候 根据它对应的颜色 设置到 我body标签背景中
// 数组
let arr = [
{ price: '100', title: '去旅游', color: 'yellow' },
{ price: '200', title: '去读书', color: 'red' },
{ price: '300', title: '去吃饭', color: 'blue' },
];
const ul = document.querySelector('ul');
let html = ``;
for (let index = 0; index < arr.length; index++) {
html += `<li data-price="${arr[index].price}" data-color="${arr[index].color}" >${arr[index].title}</li>`;
}
ul.innerHTML = html;
// 事件委托
ul.addEventListener('click', function (event) {
// 当前点击的是li标签
if (event.target.nodeName === 'LI') {
// 设置body标签的背景颜色 等于什么 = 等于当前被点击的元素（li） 身上的自定义属性 data-color
// document.body.style.backgroundColor = event.target.dataset.color;
document.body.style.backgroundColor =
event.target.getAttribute('data-color');
// alert(
// // `你想要去做的事情，要花这么多钱哦 ${event.target.dataset.price}`
// );
}
});
</script>
</body>
</html>
4 拓展-if-简写
false 值 : 0 , ' ' , false , null .indefined ,NaN
除了 false 值 的其他都为true
i f ( 条件 ){
}
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>09-if简写.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// abc 值为 false 就会输出 2
// let abc = null;
// let abc = undefined;
// let abc = "";
// let abc = 0;
// let abc = false;
let abc = NaN;
// if 对代码 做隐式转换 转换成布尔类型
// 只要 abc 值为true 那么就会输出 1
// let abc='你好a'
if (abc) {
console.log(1);
} else {
console.log(2);
}
</script>
</body>
</html>
5 拓展-字符串方法
字符串 可以 将 字母转 大小写 也可以转 数组
js 帮我们封装了很多大量和实用 字符串方法
常用示例:
| 属性 | 作用 | 示例 |
|---|---|---|
| dom.toUpperCase( ) | 字母转大写 | let msg = 'abcdefg'; // ABCDEFG |
| dom.toLowerCase( ) | 字母转小写 | let msg = 'HELLODFDFDFDFDFD'; //hellodfdfdfdfd |
| dom.split(' ') | 转成数组 | const str="abcdefg"; //=> ["a","b","c","d","e","f","g"] |
| dom.split( ' - ' ) | 转成数组 | const str = 'a-b-c-d-e-f-g'; // ["a","b","c","d","e","f","g"] |
| dom.split( ) | 按照什么来分割你的字符串变成数组 | |
| dom1.concat(dom2) | 拼接 不过字符串拼接用 + 更方便 | console.log( str1.concat(str2) ) |
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>17-字符串方法.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 我们在实际开发过程中，有很多需求要针对字符串做处理
// js 帮我们封装了很多大量和实用 字符串方法
// 先介绍一些
// 转大写 转小写。
// let msg = 'HELLODFDFDFDFDFD'; //hellodfdfdfdfd
// let msg = 'abcdefg'; // ABCDEFG
// msg 转 大写
// console.log(msg.toUpperCase());
// 转小写
// console.log(msg.toLowerCase()); //转成小写
// 字符串和数组很相似
// 能不能把字符串 转成数组？
const str="abcdefg"; //=> ["a","b","c","d","e","f","g"]
// // split("") 分割
console.log(str.split(""));
// const str = 'a-b-c-d-e-f-g'; // ["a","b","c","d","e","f","g"]
// console.log(str.split('-'));
// console.dir(str);
/*
1 转大写 toUpperCase()
2 转小写 toLowerCase()
3 转数组 str.split('') 按照什么来分割你的字符串变成数组
*/
</script>
</body>
</html>
6 拓展-数组方法
数组 也可以转 字符串
两个数组也能拼接在一起
// 连接 数组和数组之间连接
const arr1 = ['1', '2', '3'];
const arr2 = ['a', 'b', 'c'];
// 将两个数组合并成一个数组 concat
console.log(arr1.concat(arr2));//['1', '2', '3','a', 'b', 'c']
| 属性 | 作用 | 示例 |
|---|---|---|
| dom.join( ' ' ) | 数组转字符串 | arr3 = ['a', 'b', 'c', 'd']; => abcd |
| dom.join( ' - ' ) | 数组转字符串 | arr3 = ['a', 'b', 'c', 'd']; => // a-b-c-d |
| dom1.concat(dom2) | 数组拼接 | arr1 = ['1', '2', '3']; arr2 = ['a', 'b', 'c'] => //['1', '2', '3','a', 'b', 'c'] |
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>18-数组方法.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 数组 补充 常用
//
const arr3 = ['a', 'b', 'c', 'd'];
console.log(arr3.join('')); // join 数组转字符串 abcd
console.log(arr3.join('-')); // a-b-c-d 数组转字符串 a-b-c-d
// 连接 数组和数组之间连接
const arr1 = ['1', '2', '3'];
const arr2 = ['a', 'b', 'c'];
// 将两个数组合并成一个数组 concat
console.log(arr1.concat(arr2));//['1', '2', '3','a', 'b', 'c']
//字符串也有一个 concat 也是表示合并
const str1 = '123';
const str2 = 'abc';
// console.log(str1.concat(str2));// 很少用 有什么用？ 当你的键盘 + 键坏 使用它
console.log(str1 + str2); // 更加简单好理解
</script>
</body>
</html>
7 本地存储-localStorage-基本类型-复杂类型
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5 规范提出了相关解决方案
1 数据存储在用户浏览器中
2 设置,读取方便,甚至页面刷新不丢失数据
3 容量较大,sessionStorage 和 localStorage 约 5M 左右
1 基本类型
localStorage 的作用
1 生命周期永久生效, 除非手动删除 否则关闭页面也会存在
2 可以多窗口(页面) 共享 (同一浏览器可以共享)
3 以 键 值 的形式存储使用 ( 'key' , value )
本地存储 四个API 属性与作用:
| 属性 | 作用 |
|---|---|
| localStorage.setItem('key',value) | 存储 数据 |
| localStorage.getItem('key') | 读取 数据 |
| localStorage.removeItem('key') | 删除一个 数据 |
| localStorage.clear(); | 清空所有 数据 |
基本类型-代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
本地存储 四个api
1 存 localStorage.setItem(key,value)
2 取 localStorage.getItem(key)
3 删除一个 localStorage.removeItem(key)
4 清空 localStorage.clear();
*/
// localStorage.setItem('abc',1234) 存储 'abc' 这个值 1234
// const num= localStorage.getItem('abc') 获取'abc' 这个存储
// console.log(num);
// localStorage.removeItem('abc') 删除这个'abc'的存储
for (let index = 0; index <100 ;index++) {
localStorage.setItem(`abc${index}`,index) //存储 100个值
}
localStorage.clear()//清空所有值
</script>
</body>
</html>
2 复杂类型-JSON对象
1 本地存储无法存放 复杂类型的数据
2 复杂类型的数据 通过JSON对象 字符串 相互之间的转换
JSON 对象 的转换:
| 属性 | 作用 |
|---|---|
| let 变量 = JSON.stringify (数组) | 数组转成字符串 |
| let 数组 = JSON.parse (变量) | 字符串转成数组 |
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>06-本地存储-localstorage.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// console.log( localStorage.getItem("sdfdfdd") );// 如果没有数据的时候 本地存储会返回什么？
// let str= localStorage.getItem("sdfdfdd");// null
// JSON.parse(null)// 不正确了呀
// 判断有没有数据 如果没有数据 返回一个空数组
// 有数据 将字符串 解析成数组 再给你返回
/*
本地存储 存储数据类型 不管你传入什么类型都好，最终都被它转换成 字符串类型
本地存储 存储复杂类型 引用类型的数据 会出现数据丢失的问题 固定规则来着
（我们的菜篮子 只能用来装青菜 你用来装水 我不管---）
对象 数组
*/
// 数组和对象 适合管理 比较复杂的数据
// const obj = `{ name: '路飞', height: 100, weight: 200 }`;
// // 丧失 对象 简洁用法的意义
// console.log(obj.name );
// console.log(obj.height );
// console.log(obj.weight );
// // 能不能 把对象格式转成 字符串格式 ， 继续使用 本地存储
// localStorage.setItem("obj",obj);// obj 是一个长得想 对象的 字符串
// 在行业中我们会这么做
// // 1 还是正常定义对象
const obj = {
name: '路飞',
height: 100,
weight: 200,
};
// // 2 有好用的代码 ，可以帮我们快速把一个对象转成字符串
const objStr = JSON.stringify(obj);
// // 3 本地存储 可以存储字符串类型的数据
localStorage.setItem("obj",objStr);
// 4 把本地存储的数据重新读取出来
const newObjStr = localStorage.getItem("obj");
// console.log(newObjStr);
// // 5 你能不能帮 我 重新把 这个 字符串 解析成原来的对象
const newObj = JSON.parse(newObjStr);
console.log(newObj);
/*
1 本地存储无法存放 复杂类型的数据
2 复杂类型的数据 通过JSON对象 字符串 相互之间的转换
*/
</script>
</body>
</html>
8 会话存储-sessionStorage (了解)
1、生命周期为关闭浏览器窗口 数据就会消失
2、在同一个窗口(页面)下数据可以共享
3 以键值对的形式存储使用
4 用法跟 localStorage 基本相同
四个 API
| 属性 | 作用 |
|---|---|
| sessionStorage.setItem('key',value) | 存储 数据 |
| sessionStorage.getItem('key') | 读取 数据 |
| sessionStorage.removeItem('key') | 删除一个 数据 |
| sessionStorage.clear(); | 清空所有 数据 |
9 案例示范: 学生就业薪资 - 本地存储版本 案例
本地存储的使用(基本类型-复杂类型)
步骤分析:
数组哪里发生变化,就往本地存储中存一份
1
2
3
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>08-综合案例-模版</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #721c24;
}
h1 {
text-align: center;
color: #333;
margin: 20px 0;
}
table {
margin: 0 auto;
width: 800px;
border-collapse: collapse;
color: #004085;
}
th {
padding: 10px;
background: #cfe5ff;
font-size: 20px;
font-weight: 400;
}
td,
th {
border: 1px solid #b8daff;
}
td {
padding: 10px;
color: #666;
text-align: center;
font-size: 16px;
}
tbody tr {
background: #fff;
}
tbody tr:hover {
background: #e1ecf8;
}
.info {
width: 900px;
margin: 50px auto;
text-align: center;
}
.info input {
width: 80px;
height: 25px;
outline: none;
border-radius: 5px;
border: 1px solid #b8daff;
padding-left: 5px;
}
.info button {
width: 60px;
height: 25px;
background-color: #004085;
outline: none;
border: 0;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
.info .age {
width: 50px;
}
</style>
</head>
<body>
<h1>新增学员</h1>
<div class="info">
姓名：<input type="text" class="uname" /> 年龄：<input
type="text"
class="age"
/>
性别:
<select name="gender" id="" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
薪资：<input type="text" class="salary" /> 就业城市：<select
name="city"
id=""
class="city"
>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="曹县">曹县</option>
</select>
<button class="add">录入</button>
</div>
<h1>就业榜</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>这是名称</td>
<td>这是年龄</td>
<td>这是性别</td>
<td>这是工资</td>
<td>这是所在城市</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr> -->
</tbody>
</table>
<script>
// 1.1 定义数组 负责存放表格要显示的数据
// 获取本地存储中的数组（字符串格式） 转成 数组格式
// 第一次打开页面的时候 ，本地存储里面会有数据吗
// 获取本地存储数据
let strArr=localStorage.getItem('arr')
let arr = [];
// 判读本地存储有没有数据，有就应用 没有就空数组
if(strArr){
arr=JSON.parse(strArr)
}
const tbody = document.querySelector('tbody');
// 2 给 录入绑定点击事件
const add = document.querySelector('.add');
const uname = document.querySelector('.uname');
const age = document.querySelector('.age');
const gender = document.querySelector('.gender');
const salary = document.querySelector('.salary');
const city = document.querySelector('.city');
// 1.2 根据数组渲染页面
renderTableByArr();
// 2 按钮绑定点击事件
add.addEventListener('click', function () {
// 2.1 创建一个新的对象 把表单数据都合并到对象中
const data = {
// 学号
id: Date.now(),
// 姓名
uname: uname.value,
// 年龄
age: age.value,
// 性别
gender: gender.value,
// 薪资
salary: salary.value,
// 就业城市
city: city.value,
};
// 老师打了一个 断点 来验证 上面的代码 没有写错
// 2.2 给数组插入新的元素
arr.push(data);
// ---------------------------------------------------------
// 将数组转成 字符串
let strArr=JSON.stringify(arr)
// 存一份到本地存储中
localStorage.setItem('arr',strArr)
// 2.3 数组发生改变 重新调用渲染页面的函数
renderTableByArr();
// 2.4 表单数据清空
uname.value = '';
age.value = '';
gender.value = '男';
salary.value = '';
city.value = '北京';
});
// 3 tbody绑定点击事件，同时判断被点击的是不是 del 删除标签
tbody.addEventListener('click', function (event) {
// 3.1 判断当前点击的是不是a标签
if (event.target.nodeName === 'A') {
// <a data-index="2" href="javascript:" class="del">删除</a>
// 获取到a标签 上存放的 index
// event.target = a标签的dom元素
// console.dir(event.target.dataset.index)
const index = event.target.dataset.index;
// 3.3 执行数组删除元素
arr.splice(index,1);
// ---------------------------------------------------------
// 将数组转成 字符串
let strArr=JSON.stringify(arr)
// 存一份到本地存储中
localStorage.setItem('arr',strArr)
// 3.4 调用根据数组渲染页面的函数
renderTableByArr();
}
});
// 根据数组渲染表格
function renderTableByArr() {
let html = ``;
for (let index = 0; index < arr.length; index++) {
// 要想使用自定义标签属性,,必须要给标签添加 data-index="${index}"
html += `
<tr>
<td>${arr[index].id}</td>
<td>${arr[index].uname}</td>
<td>${arr[index].age}</td>
<td>${arr[index].gender}</td>
<td>${arr[index].salary}</td>
<td>${arr[index].city}</td>
<td>
<a data-index="${index}" href="javascript:" class="del">删除</a>
</td>
</tr>
`;
}
// 把生成的tr插入到 tbody中
tbody.innerHTML = html;
}
</script>
</body>
</html>
