diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/README.md" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/README.md"
new file mode 100644
index 0000000000000000000000000000000000000000..36adf737d45b65733c6a247396bf44aaa36258d8
--- /dev/null
+++ "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/README.md"
@@ -0,0 +1,374 @@
+# Web APIs - 第5天笔记
+
+> 目标: 能够利用JS操作浏览器,具备利用本地存储实现学生就业表的能力
+
+- BOM操作
+- 综合案例
+
+
+## js组成
+
+JavaScript的组成
+
+- ECMAScript:
+ - 规定了js基础语法核心知识。
+ - 比如:变量、分支语句、循环语句、对象等等
+
+
+- Web APIs :
+ - DOM 文档对象模型, 定义了一套操作HTML文档的API
+ - BOM 浏览器对象模型,定义了一套操作浏览器窗口的API
+
+ 
+
+## window对象
+
+**BOM** (Browser Object Model ) 是浏览器对象模型
+
+- window对象是一个全局对象,也可以说是JavaScript中的顶级对象
+- 像document、alert()、console.log()这些都是window的属性,基本BOM的属性和方法都是window的
+- 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
+- window对象下的属性和方法调用的时候可以省略window
+
+ 
+
+## 定时器-延迟函数
+
+JavaScript 内置的一个用来让代码延迟执行的函数,叫 setTimeout
+
+**语法:**
+
+~~~JavaScript
+setTimeout(回调函数, 延迟时间)
+~~~
+
+setTimeout 仅仅只执行一次,所以可以理解为就是把一段代码延迟执行, 平时省略window
+
+间歇函数 setInterval : 每隔一段时间就执行一次, , 平时省略window
+
+清除延时函数:
+
+~~~JavaScript
+clearTimeout(timerId)
+~~~
+
+>注意点
+>
+>1. 延时函数需要等待,所以后面的代码先执行
+>2. 返回值是一个正整数,表示定时器的编号
+
+~~~html
+
+
+
+~~~
+
+## location对象
+
+location (地址) 它拆分并保存了 URL 地址的各个组成部分, 它是一个对象
+
+| 属性/方法 | 说明 |
+| --------- | ---------------------------------------------------- |
+| href | 属性,获取完整的 URL 地址,赋值时用于地址的跳转 |
+| search | 属性,获取地址中携带的参数,符号 ?后面部分 |
+| hash | 属性,获取地址中的啥希值,符号 # 后面部分 |
+| reload() | 方法,用来刷新当前页面,传入参数 true 时表示强制刷新 |
+
+~~~html
+
+
+ 音乐
+ 下载
+
+
+
+
+~~~
+
+## navigator对象
+
+navigator是对象,该对象下记录了浏览器自身的相关信息
+
+常用属性和方法:
+
+- 通过 userAgent 检测浏览器的版本及平台
+
+~~~javascript
+// 检测 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'
+ }})();
+~~~
+
+## histroy对象
+
+history (历史)是对象,主要管理历史记录, 该对象与浏览器地址栏的操作相对应,如前进、后退等
+
+**使用场景**
+
+history对象一般在实际开发中比较少用,但是会在一些OA 办公系统中见到。
+
+ 
+
+常见方法:
+
+ 
+
+~~~html
+
+
+
+
+
+
+~~~
+
+## 本地存储(今日重点)
+
+本地存储:将数据存储在本地浏览器中
+
+常见的使用场景:
+
+ 页面刷新数据不丢失
+
+好处:
+
+1、页面刷新或者关闭不丢失数据,实现数据持久化
+
+2、容量较大,sessionStorage和 localStorage 约 5M 左右
+
+### localStorage(重点)
+
+**作用:** 数据可以长期保留在本地浏览器中,刷新页面和关闭页面,数据也不会丢失
+
+**特性:**以键值对的形式存储,并且存储的是字符串, 省略了window
+
+
+
+~~~html
+
+
+
+
+
+
+
+ 本地存储-localstorage
+
+
+
+
+
+
+
+~~~
+
+### sessionStorage(了解)
+
+特性:
+
+- 用法跟localStorage基本相同
+- 区别是:当页面浏览器被关闭时,存储在 sessionStorage 的数据会被清除
+
+存储:sessionStorage.setItem(key,value)
+
+获取:sessionStorage.getItem(key)
+
+删除:sessionStorage.removeItem(key)
+
+### localStorage 存储复杂数据类型
+
+**问题:**本地只能存储字符串,无法存储复杂数据类型.
+
+**解决:**需要将复杂数据类型转换成 JSON字符串,在存储到本地
+
+**语法:**JSON.stringify(复杂数据类型)
+
+JSON字符串:
+
+- 首先是1个字符串
+- 属性名使用双引号引起来,不能单引号
+- 属性值如果是字符串型也必须双引号
+
+~~~html
+
+
+
+~~~
+
+
+
+**问题:**因为本地存储里面取出来的是字符串,不是对象,无法直接使用
+
+**解决: **把取出来的字符串转换为对象
+
+**语法:**JSON.parse(JSON字符串)
+
+~~~html
+
+
+
+~~~
+
+## 综合案例
+
+### 数组map 方法
+
+**使用场景:**
+
+map 可以遍历数组处理数据,并且返回新的数组
+
+**语法:**
+
+~~~javascript
+
+
+
+~~~
+
+>map 也称为映射。映射是个术语,指两个元素的集之间元素相互“对应”的关系。
+>
+>map重点在于有返回值,forEach没有返回值(undefined)
+
+### 数组join方法
+
+**作用:**join() 方法用于把数组中的所有元素转换一个字符串
+
+**语法:**
+
+~~~html
+
+
+
+~~~
+
+
+
+
+
+
+
+
+
diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676039814018.png" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676039814018.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5c46864a03d63d57998c0cffd2ee3373837d779c
Binary files /dev/null and "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676039814018.png" differ
diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676040472631.png" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676040472631.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5cd88714f28e05f3dc5afcb034de27aba8366a6a
Binary files /dev/null and "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676040472631.png" differ
diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047389456.png" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047389456.png"
new file mode 100644
index 0000000000000000000000000000000000000000..021282c9ecbabb45664b908694c1c1bac297ce9c
Binary files /dev/null and "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047389456.png" differ
diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047436362.png" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047436362.png"
new file mode 100644
index 0000000000000000000000000000000000000000..8d5542e131ade2c769d60564c0ac4f1d5eafa351
Binary files /dev/null and "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047436362.png" differ
diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047834796.png" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047834796.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e9fdc8447571a3a819c66842c0b42bdcd49c392e
Binary files /dev/null and "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047834796.png" differ
diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047846593.png" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047846593.png"
new file mode 100644
index 0000000000000000000000000000000000000000..0b2cad08021f170097cb6ff659e2b7c4e30dcb01
Binary files /dev/null and "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676047846593.png" differ
diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676049635087.png" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676049635087.png"
new file mode 100644
index 0000000000000000000000000000000000000000..99c54d8bce9b6895cd5af7ccd34df81f66e86f7a
Binary files /dev/null and "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/1676049635087.png" differ
diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/error.png" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/error.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7e7af318ffc788390e2f52cafd85ccf5663474e6
Binary files /dev/null and "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/04-\347\254\224\350\256\260/assets/error.png" differ
diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/css/index.css" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/css/index.css"
new file mode 100644
index 0000000000000000000000000000000000000000..bf537709ea7ef92a9f3564533646f812e737c65b
--- /dev/null
+++ "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/css/index.css"
@@ -0,0 +1,71 @@
+* {
+ 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, .info select {
+ width: 80px;
+ height: 27px;
+ outline: none;
+ border-radius: 5px;
+ border:1px solid #b8daff;
+ padding-left: 5px;
+ box-sizing: border-box;
+ margin-right: 15px;
+}
+.info button {
+ width: 60px;
+ height: 27px;
+ background-color: #004085;
+ outline: none;
+ border: 0;
+ color: #fff;
+ cursor: pointer;
+ border-radius: 5px;
+}
+.info .age {
+ width: 50px;
+}
\ No newline at end of file
diff --git "a/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250\346\241\210\344\276\213.html" "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250\346\241\210\344\276\213.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0b076c8be160de151324bd39092c290a32a8f3a4
--- /dev/null
+++ "b/\346\236\227\345\277\227\344\270\207/241125\345\255\246\347\224\237\346\267\273\345\212\240\346\225\260\346\215\256/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250/\345\255\246\347\224\237\344\277\241\346\201\257\350\241\250\346\241\210\344\276\213.html"
@@ -0,0 +1,157 @@
+
+
+
+
+
+
+
+ 学生信息管理
+
+
+
+
+ 新增学员
+
+
+
+ 就业榜条数据
+
+
+
+ | 学号 |
+ 姓名 |
+ 年龄 |
+ 性别 |
+ 薪资 |
+ 就业城市 |
+ 操作 |
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file